mirror of https://github.com/shoelace-style/shoelace.git synced 2026-01-12 11:09:13 +00:00

Files

Manuel Schmidt 8121faa1d4 Enrich components @summary with description from docs (#962 )

* keep header styles with repositioned description text

* `animated-image` move description to component

* code style

* `avatar` add summary from docs

* `badge` add summary from docs

* `breadcrumb` add summary from docs

* `button` add summary from docs

* lead sentence is now part of the header

* `button-group` add summary from docs

* `card` add summary from docs

* `checkbox` add summary from docs

* `color-picker` add summary from docs

* `details` add summary from docs

* `dialog` add summary from docs

* `divider` add summary from docs

* `drawer` add summary from docs

* `dropdown` add summary from docs

* `format-bytes` add summary from docs

* `format-date` add summary from docs

* `format-number` add summary from docs

* `icon` add summary from docs

* `icon-button` add summary from docs

* `image-comparer` add summary from docs

* `include` add summary from docs

* `input` add summary from docs

* `menu` add summary from docs

* `menu-item` add summary from docs

* `menu-label` add summary from docs

* `popup` add summary from docs

* `progressbar` add summary from docs

* `progress-ring` add summary from docs

* `radio` add summary from docs

* `radio-button` add summary from docs

* `range` add summary from docs

* `rating` add summary from docs

* `relative-time` add summary from docs

* `select` add summary from docs

* `skeleton` add summary from docs

* `spinner` add summary from docs

* `split-panel` add summary from docs

* `switch` add summary from docs

* `tab-group` add summary from docs

* `tag` add summary from docs

* `textarea` add summary from docs

* `tooltip` add summary from docs

* `visually-hidden` add summary from docs

* `animation` add summary from docs

* `breadcrumb-item` add summary from docs

* `mutation-observer` add summary from docs

* `radio-group` add summary from docs

* `resize-observer` add summary from docs

* `tab` add summary from docs

* `tab-panel` add summary from docs

* `tree` add summary from docs

* `tree-item` add summary from docs

* remove `title` for further usage of `Sl` classnames in docs

* revert: use markdown parser for component summary

2022-10-21 09:56:35 -04:00

9.0 KiB

Raw Permalink Blame History

Radio Button

[component-header:sl-radio-button]

Radio buttons are designed to be used with radio groups. When a radio button has focus, the arrow keys can be used to change the selected option just like standard radio controls.

<sl-radio-group label="Select an option" name="a" value="1">
  <sl-radio-button value="1">Option 1</sl-radio-button>
  <sl-radio-button value="2">Option 2</sl-radio-button>
  <sl-radio-button value="3">Option 3</sl-radio-button>
</sl-radio-group>

import { SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';

const App = () => (
  <SlRadioGroup label="Select an option" name="a" value="1">
    <SlRadioButton value="1">Option 1</SlRadioButton>
    <SlRadioButton value="2">Option 2</SlRadioButton>
    <SlRadioButton value="3">Option 3</SlRadioButton>
  </SlRadioGroup>
);

Examples

Checked States

To set the initial value and checked state, use the value attribute on the containing radio group.

<sl-radio-group label="Select an option" name="a" value="1">
  <sl-radio-button value="1">Option 1</sl-radio-button>
  <sl-radio-button value="2">Option 2</sl-radio-button>
  <sl-radio-button value="3">Option 3</sl-radio-button>
</sl-radio-group>

import { SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';

const App = () => (
  <SlRadioGroup label="Select an option" name="a" value="1">
    <SlRadioButton value="1">Option 1</SlRadioButton>
    <SlRadioButton value="2">Option 2</SlRadioButton>
    <SlRadioButton value="3">Option 3</SlRadioButton>
  </SlRadioGroup>
);

Disabled

Use the disabled attribute to disable a radio button.

<sl-radio-group label="Select an option" name="a" value="1">
  <sl-radio-button value="1">Option 1</sl-radio-button>
  <sl-radio-button value="2" disabled>Option 2</sl-radio-button>
  <sl-radio-button value="3">Option 3</sl-radio-button>
</sl-radio-group>

import { SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';

const App = () => (
  <SlRadioGroup label="Select an option" name="a" value="1">
    <SlRadioButton value="1">Option 1</SlRadioButton>
    <SlRadioButton value="2" disabled>
      Option 2
    </SlRadioButton>
    <SlRadioButton value="3">Option 3</SlRadioButton>
  </SlRadioGroup>
);

Sizes

Use the size attribute to change a radio button's size.

<sl-radio-group label="Select an option" name="a" value="1">
  <sl-radio-button size="small" value="1">Option 1</sl-radio-button>
  <sl-radio-button size="small" value="2">Option 2</sl-radio-button>
  <sl-radio-button size="small" value="3">Option 3</sl-radio-button>
</sl-radio-group>

<br />

<sl-radio-group label="Select an option" name="a" value="1">
  <sl-radio-button size="medium" value="1">Option 1</sl-radio-button>
  <sl-radio-button size="medium" value="2">Option 2</sl-radio-button>
  <sl-radio-button size="medium" value="3">Option 3</sl-radio-button>
</sl-radio-group>

<br />

<sl-radio-group label="Select an option" name="a" value="1">
  <sl-radio-button size="large" value="1">Option 1</sl-radio-button>
  <sl-radio-button size="large" value="2">Option 2</sl-radio-button>
  <sl-radio-button size="large" value="3">Option 3</sl-radio-button>
</sl-radio-group>

import { SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';

const App = () => (
  <SlRadioGroup label="Select an option" name="a" value="1">
    <SlRadioButton size="small" value="1">Option 1</SlRadioButton>
    <SlRadioButton size="small" value="2">Option 2</SlRadioButton>
    <SlRadioButton size="small" value="3">Option 3</SlRadioButton>
  </SlRadioGroup>

  <br />

  <SlRadioGroup label="Select an option" name="a" value="1">
    <SlRadioButton size="medium" value="1">Option 1</SlRadioButton>
    <SlRadioButton size="medium" value="2">Option 2</SlRadioButton>
    <SlRadioButton size="medium" value="3">Option 3</SlRadioButton>
  </SlRadioGroup>

  <br />

  <SlRadioGroup label="Select an option" name="a" value="1">
    <SlRadioButton size="large" value="1">Option 1</SlRadioButton>
    <SlRadioButton size="large" value="2">Option 2</SlRadioButton>
    <SlRadioButton size="large" value="3">Option 3</SlRadioButton>
  </SlRadioGroup>
);

Pill Buttons

Use the pill attribute to give radio buttons rounded edges.

<sl-radio-group label="Select an option" name="a" value="1">
  <sl-radio-button pill size="small" value="1">Option 1</sl-radio-button>
  <sl-radio-button pill size="small" value="2">Option 2</sl-radio-button>
  <sl-radio-button pill size="small" value="3">Option 3</sl-radio-button>
</sl-radio-group>

<br />

<sl-radio-group label="Select an option" name="a" value="1">
  <sl-radio-button pill size="medium" value="1">Option 1</sl-radio-button>
  <sl-radio-button pill size="medium" value="2">Option 2</sl-radio-button>
  <sl-radio-button pill size="medium" value="3">Option 3</sl-radio-button>
</sl-radio-group>

<br />

<sl-radio-group label="Select an option" name="a" value="1">
  <sl-radio-button pill size="large" value="1">Option 1</sl-radio-button>
  <sl-radio-button pill size="large" value="2">Option 2</sl-radio-button>
  <sl-radio-button pill size="large" value="3">Option 3</sl-radio-button>
</sl-radio-group>

import { SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';

const App = () => (
  <SlRadioGroup label="Select an option" name="a" value="1">
    <SlRadioButton pill size="small" value="1">Option 1</SlRadioButton>
    <SlRadioButton pill size="small" value="2">Option 2</SlRadioButton>
    <SlRadioButton pill size="small" value="3">Option 3</SlRadioButton>
  </SlRadioGroup>

  <br />

  <SlRadioGroup label="Select an option" name="a" value="1">
    <SlRadioButton pill size="medium" value="1">Option 1</SlRadioButton>
    <SlRadioButton pill size="medium" value="2">Option 2</SlRadioButton>
    <SlRadioButton pill size="medium" value="3">Option 3</SlRadioButton>
  </SlRadioGroup>

  <br />

  <SlRadioGroup label="Select an option" name="a" value="1">
    <SlRadioButton pill size="large" value="1">Option 1</SlRadioButton>
    <SlRadioButton pill size="large" value="2">Option 2</SlRadioButton>
    <SlRadioButton pill size="large" value="3">Option 3</SlRadioButton>
  </SlRadioGroup>
);

Prefix and Suffix Icons

Use the prefix and suffix slots to add icons.

<sl-radio-group label="Select an option" name="a" value="1">
  <sl-radio-button value="1">
    <sl-icon slot="prefix" name="archive"></sl-icon>
    Option 1
  </sl-radio-button>

  <sl-radio-button value="2">
    <sl-icon slot="suffix" name="bag"></sl-icon>
    Option 2
  </sl-radio-button>

  <sl-radio-button value="3">
    <sl-icon slot="prefix" name="gift"></sl-icon>
    <sl-icon slot="suffix" name="cart"></sl-icon>
    Option 3
  </sl-radio-button>
</sl-radio-group>

import { SlIcon, SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';

const App = () => (
  <SlRadioGroup label="Select an option" name="a" value="1">
    <SlRadioButton value="1">
      <SlIcon slot="prefix" name="archive" />
      Option 1
    </SlRadioButton>

    <SlRadioButton value="2">
      <SlIcon slot="suffix" name="bag" />
      Option 2
    </SlRadioButton>

    <SlRadioButton value="3">
      <SlIcon slot="prefix" name="gift" />
      <SlIcon slot="suffix" name="cart" />
      Option 3
    </SlRadioButton>
  </SlRadioGroup>
);

Buttons with Icons

You can omit button labels and use icons instead. Make sure to set a label attribute on each icon so screen readers will announce each option correctly.

<sl-radio-group label="Select an option" name="a" value="neutral">
  <sl-radio-button value="angry">
    <sl-icon name="emoji-angry" label="Angry"></sl-icon>
  </sl-radio-button>

  <sl-radio-button value="sad">
    <sl-icon name="emoji-frown" label="Sad"></sl-icon>
  </sl-radio-button>

  <sl-radio-button value="neutral">
    <sl-icon name="emoji-neutral" label="Neutral"></sl-icon>
  </sl-radio-button>

  <sl-radio-button value="happy">
    <sl-icon name="emoji-smile" label="Happy"></sl-icon>
  </sl-radio-button>

  <sl-radio-button value="laughing">
    <sl-icon name="emoji-laughing" label="Laughing"></sl-icon>
  </sl-radio-button>
</sl-radio-group>

import { SlIcon, SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';

const App = () => (
  <SlRadioGroup label="Select an option" name="a" value="neutral">
    <SlRadioButton value="angry">
      <SlIcon name="emoji-angry" label="Angry" />
    </SlRadioButton>

    <SlRadioButton value="sad">
      <SlIcon name="emoji-frown" label="Sad" />
    </SlRadioButton>

    <SlRadioButton value="neutral">
      <SlIcon name="emoji-neutral" label="Neutral" />
    </SlRadioButton>

    <SlRadioButton value="happy">
      <SlIcon name="emoji-smile" label="Happy" />
    </SlRadioButton>

    <SlRadioButton value="laughing">
      <SlIcon name="emoji-laughing" label="Laughing" />
    </SlRadioButton>
  </SlRadioGroup>
);

[component-metadata:sl-radio-button]

9.0 KiB Raw Permalink Blame History