kopia lustrzana https://github.com/shoelace-style/shoelace
1.3 KiB
1.3 KiB
Radio Group
[component-header:sl-radio-group]
Radio Groups are used to group multiple radios so they function as a single control.
<sl-radio-group label="Select an option">
<sl-radio value="1" checked>Option 1</sl-radio>
<sl-radio value="2">Option 2</sl-radio>
<sl-radio value="3">Option 3</sl-radio>
</sl-radio-group>
import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlRadioGroup label="Select an option">
<SlRadio value="1" checked>Option 1</SlRadio>
<SlRadio value="2">Option 2</SlRadio>
<SlRadio value="3">Option 3</SlRadio>
</SlRadioGroup>
);
Examples
Showing the Fieldset
You can show a fieldset and legend that wraps the radio group using the fieldset
attribute.
<sl-radio-group label="Select an option" fieldset>
<sl-radio value="1" checked>Option 1</sl-radio>
<sl-radio value="2">Option 2</sl-radio>
<sl-radio value="3">Option 3</sl-radio>
</sl-radio-group>
import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlRadioGroup label="Select an option" fieldset>
<SlRadio value="1" checked>Option 1</SlRadio>
<SlRadio value="2">Option 2</SlRadio>
<SlRadio value="3">Option 3</SlRadio>
</SlRadioGroup>
);
[component-metadata:sl-radio-group]