Doggo Storybook 0.16.0-10-g8217f40

Radio Group

Renders a group of radio buttons, for example for a toolbar.

Usage

<.radio_group
  id="favorite-dog"
  name="favorite-dog"
  label="Favorite Dog"
  options={[
    {"Labrador Retriever", "labrador"},
    {"German Shepherd", "german_shepherd"},
    {"Golden Retriever", "golden_retriever"},
    {"French Bulldog", "french_bulldog"},
    {"Beagle", "beagle"}
  ]}
/>

CSS

To target the wrapper, you can use an attribute selector:

[role="radiogroup"] {}

Keyboard

Left, Right, Up and Down - move between the radios and check the one the focus lands on.
Space - check the focused radio.

The group is a single tab stop. The radios are native elements sharing a name, so the browser handles this.

Attribute	Type	Documentation	Default
class	:any	Any additional classes to be added. Read more Read less	[]
Variations of the component should be expressed via modifier attributes, and it is preferable to use styles on the parent container to arrange components on the page, but if you have to, you can use this attribute to pass additional utility classes to the component. The value can be a string or a list of strings.
Required id *	:string
label	:string	A accessibility label for the radio group. Set as `aria-label` attribute. Read more Read less
You should ensure that either the `label` or the `labelledby` attribute is set. Do not repeat the word `radio group` in the label. Screen readers announce the role along with the name. Using the role in the label would make screen readers repeat it.
labelledby	:string	The DOM ID of an element that labels this radio group. Read more Read less
Example: Favorite Dog <.radio_group labelledby="dog-rg-label"> You should ensure that either the `label` or the `labelledby` attribute is set.
Required name *	:string	The `name` attribute for the `input` elements.
Required options *	:list	A list of options. It can be given a list values or as a list of Read more Read less
`{label, value}` tuples.
required	:boolean		false
rest	:global	Any additional HTML attributes.
value	:any	The currently selected value, which is compared with the option value to Read more Read less
determine whether a radio button is checked.