Doggo Storybook 0.10.2

Radio Group

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

Read more Read less

To render radio buttons within a regular form, use input/1 with the "radio-group" type instead.

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="radio-group"] {}
Attribute Type Documentation Default Value
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.
labelledby :string

The DOM ID of an element that labels this radio group.

 Read more Read less

Example:

<h3 id="dog-rg-label">Favorite Dog</h3>
<.radio_group labelledby="dog-rg-label"></.radio_group>

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.
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.