Radio Group

Installation

pnpm dlx shadcn-svelte@latest add https://coss-sv.vercel.app/r/radio-group.json

Usage

<script lang="ts">
  import * as RadioGroup from "$lib/components/ui/radio-group/index.js";
</script>

<RadioGroup.Root defaultValue="next">
  <label><RadioGroup.Item value="next" /> Next.js</label>
  <label><RadioGroup.Item value="vite" /> Vite</label>
  <label><RadioGroup.Item value="astro" /> Astro</label>
</RadioGroup.Root>

API Reference

RadioGroup.Root

The root owns one selected value. Use defaultValue for the initial selection or bind:value for controlled state. Arrow keys move the selection and skip disabled items.

RadioGroup.Item

Each item needs a unique value and includes the COSS indicator. RadioGroup.Radio is an alias.

See the Shards Radio API for form, focus, and validation props.

Examples

For accessible labelling and validation, prefer using the Field component to wrap radio buttons. See the related example: Radio Group field.

For tabs-style mutually exclusive choices, see the Segmented Control pattern.

Disabled

With Description

Card Style

Form Integration