A radio button lets the user choose exactly one of two or more mutually exclusive options. Choosing one clears the others in the group.
How to add a radio button to a page. The file is components/css/radio.css.
Link the shared stylesheet once per page. Never copy the rules into a page, and never draw the circle with an image.
| Step | What to do |
|---|---|
| 1. Link | <link rel="stylesheet" href="/components/css/radio.css">. Both templates already have it. |
| 2. Markup | A fieldset.form-radio-group with a legend. Each option is a label.form-radio-item around an input[type="radio"] and a span. |
| 3. Group | Give every radio in the group the same name, and preselect one with checked. |
| 4. Size | Large is the default. Add form-radio-item--sm for Small. |
Copy the markup you need. Hover and focus come from :hover and :focus-visible; the [data-state] selectors in the CSS exist only so the documentation can force a state.
| Class | Use |
|---|---|
form-radio-group | The fieldset. Vertical by default. |
form-radio-item | The option label. Large. |
form-radio-item--sm | Small size. |
form-radio-field | Wraps an option and its message. |
form-radio-message | The hint under the label. |
appearance: none. The dot is a radial gradient, so no image file is loaded.name on every radio of a group.flex-direction: row on the fieldset (two short options only).[data-state] selectors do nothing outside the documentation pages.The component is one CSS file, shared by every page. Link it, never copy it. The CSS below is read from the file the page links, so it is always what you see.