Radio Groups

Capture user feedback limited to a small set of options.

javascript

import { RadioGroup, RadioItem } from '@brainandbones/skeleton';

typescript

import { writable, type Writable } from 'svelte/store';

const storeLayout: Writable<string> = writable('horz');

html

<RadioGroup selected={storeLayout}>
    <RadioItem value="horz">Horizontal</RadioItem>
    <RadioItem value="vert">Vertical</RadioItem>
</RadioGroup>

To set display width to 100% use display="flex"

html

<RadioGroup display="flex"></RadioGroup>

Properties

Prop	Type	Values	Required	Description
selected	Writable	any	✓	Provide a Svelte writable to store the selected state value.
display	string	inline-flex	-	Provide classes to set the display style.
background	string	bg-surface-300 dark:bg-surface-700	-	Provide classes to set the base background color.
hover	string	hover:bg-primary-500/10	-	Provide classes to set the hover style.
accent	string	bg-primary-500 !text-white	-	Provide classes to set the highlighted accent color.
color	string	text-white	-	Provide classes to set the highlighted text color.
fill	string	-	-	Provide classes to set the highlighted SVG fill color.
rounded	string	rounded	-	Provide classes to set the border radius.

Can override props hover, accent, color, fill, rounded.

Prop	Type	Description
value	any	The item's selection value.

Prop	Required	Description
label	-	Defines a semantic ARIA label.

Prop	Required	Description
label	-	Defines a semantic ARIA label.

Keys	Description
`Tab`	Moves focus to the next focusable RadioItem.
`Shift + Tab`	Moves focus to the previous focusable RadioItem.
`Space` or `Enter`	Checks the focused radio button if it is not already checked