Radio button
Radio buttons let people pick exactly one option from a set they can all see. For more than a handful of options, use a select.
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 |
The radio sits in a 48dp box: the 20dp icon plus room for its 48dp touch target. The hover state
layer is --np-color-primary on the selected radio and --np-color-on-surface on the others. The press ripple uses the other colour, as the Material
3 states define.
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 with the same name form one group. The browser gives the group arrow key navigation, a single tab stop
and form behaviour.
The component has no label, so wrap each radio in a <label> or pass aria-label. When the group 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 | The component's root DOM element, bound with bind:this. |