Radio button
Radio buttons let people pick exactly one option from a set they can all see at once. Beyond a handful of options a select keeps the screen calmer.
Usage
Copy code
<script lang="ts">
import { Radio } from 'noph-ui'
</script>
<form>
<Radio name="group" value="first" aria-label="First radio" checked defaultChecked={true} />
<Radio name="group" value="second" aria-label="Second radio" />
<Radio name="group" value="third" aria-label="Third radio" />
</form>
Labels
Copy code
<script lang="ts">
import { Radio } from 'noph-ui'
</script>
<form style="display: flex; align-items: center;">
<Radio name="animals" value="cat" id="cat-radio" checked defaultChecked={true} />
<label style="margin-right:1rem" for="cat-radio">Cat</label>
<Radio name="animals" value="second" id="mouse-radio" />
<label style="margin-right:1rem" for="mouse-radio">Mouse</label>
<Radio name="animals" value="third" id="dog-radio" />
<label for="dog-radio">Dog</label>
</form>
Theming
| Token | Default value |
|---|---|
--np-radio-icon-size | 20px |
--np-radio-icon-color | --np-color-on-surface-variant |
--np-radio-selected-icon-color | --np-color-primary |
Example
Copy code
<script lang="ts">
import { Radio } from 'noph-ui'
</script>
<Radio
--np-radio-icon-size="40px"
--np-radio-icon-color="var(--np-color-secondary)"
--np-radio-selected-icon-color="var(--np-color-tertiary)"
checked
defaultChecked={true}
aria-label="Themed radio 1"
name="themed"
/>
<Radio
--np-radio-icon-size="40px"
--np-radio-icon-color="var(--np-color-secondary)"
--np-radio-selected-icon-color="var(--np-color-tertiary)"
aria-label="Themed radio 2"
name="themed"
/>
<Radio
--np-radio-icon-size="40px"
--np-radio-icon-color="var(--np-color-secondary)"
--np-radio-selected-icon-color="var(--np-color-tertiary)"
aria-label="Themed radio 3"
name="themed"
/>
Accessibility
Each radio is a native <input type="radio">. Radios that share a name form one group, and the browser gives that group its arrow key navigation, its single
tab stop and its form behaviour.
The component brings no label of its own, so wrap each radio in a <label> or
pass aria-label. Where the group as a whole needs a question above it, put the radios
in a <fieldset> with a <legend>.
API
| Attribute | Type | Default | Description |
|---|---|---|---|
...attributes | Omit<HTMLInputAttributes, 'type'> |
Bindables
| Attribute | Type | Description |
|---|---|---|
group | string | number | null | undefined | The value of the selected radio. Bind the same variable to every radio of a group. |
element | HTMLElement | A reference to the root DOM element of the component. This variable is bound using bind:this, allowing direct access to the underlying HTML element for manipulation or querying within
the component's logic. |