Radio Group

A set of mutually exclusive options presented as radio buttons.

<script lang="ts">
import { RadioGroup, RadioGroupItem } from "coss-svelte";
</script>

<RadioGroup value="next">
	<RadioGroupItem value="next">Next.js</RadioGroupItem>
	<RadioGroupItem value="vite">Vite</RadioGroupItem>
	<RadioGroupItem value="astro">Astro</RadioGroupItem>
</RadioGroup>

Installation

Install the component package, shared coss-svelte theme, and Bits UI peer.

npm install coss-svelte @coss-svelte/theme bits-ui

Usage

Import the Svelte component exports directly from the package.

import { RadioGroup, RadioGroupItem } from "coss-svelte";

Anatomy

RadioGroup
RadioGroupItem

API Reference

RadioGroup

A set of mutually exclusive options presented as radio buttons.

Prop	Type	Default	Description
`bind:value`	`string`	`""`	Current value for the component. Bind with `bind:value` when supported.
`label`	`string`	`""`	Accessible label or fallback visible label for the control.
`options`	`Option[]`	`[]`	Options rendered by the component's built-in fallback composition.
`orientation`	`Orientation`	`"vertical"`	Layout direction for the component.

children : Snippet<[]>bind:ref : HTMLElement | null

Inherits from Bits UI RadioGroup.Root.

RadioGroupItem

Renders one item inside a toolbar group.

children : Snippet<[RadioGroupItemSnippetProps]>bind:ref : HTMLElement | null

Inherits from Bits UI RadioGroup.Item.

Implementation Details

Status: Stable
Foundation: bits
Category: Toggle & Choice
Particles: 6