Radio Group

A group of radio buttons for selecting one option.

Free For solo hobby projects. Pro For small teams and side projects. Team Audit log, SSO, and priority support.

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add radio-group

Usage

Import RadioGroup and compose it with Item sub-components:

import * as RadioGroup from '$lib/sivir/components/radio-group';

<RadioGroup.Root bind:value name="plan">
  <RadioGroup.Item value="pro" label="Pro" />
</RadioGroup.Root>

Examples

RadioGroup in different configurations.

With descriptions

Free For solo hobby projects. Pro For small teams and side projects. Team Audit log, SSO, and priority support.

Disabled

Option A Option B

Anatomy

RadioGroup.Root - Manages a single selection.

RadioGroup.Item - Defines a radio option.