Doggo Storybook 0.9.0

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. 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. 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. Example: ```html <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 `{label, value}` tuples.
rest :global Any additional HTML attributes.
value :any The currently selected value, which is compared with the option value to determine whether a radio button is checked.