Radio

Component

Storybook

Figma Demo

Guidelines

Variations

Radios are offered in two sizes that vary slightly by both type and element size:

• sm: type: normal, element size: 14px
• base: type: body, element size: 16px

Radios may include optional helper text as well as a “count” field for filter usage to indicate quantity.

Radios may be either selected or unselected.

Usage

• Use the base size in form settings when the other form elements are either base or lg.
• Use the sm size radio in tight spaces such as inside dropdown menus or tables.

Best Practices

• Use radios instead of a select field when possible, so that users can see all of the choices available.
• Avoid presenting radios with no choice selected. Offer a default selection to reduce friction. Even a neutral “none” as a pre-selection makes form usage easier.

Component Specs

API

• class: string | Default: undefined
  Class of the radio.

• checked: boolean | Default: false
  Checked state of the radio.

• count: string | Default: undefined
  The number of items the filter has in context of PLP filters.

• disabled: boolean | Default: false
  Disabled state of the radio.

• group: string | Default: undefined
  Group of the radio.

• helperText: string | Default: undefined
  Helper text of the radio.

• id: string | Default: undefined
  Id of the radio.

• label: string | Default: 'Label'
  Label of the radio.

• required: boolean | Default: false
  Required state of the radio.

• size: 'sm' | 'default' | Default: 'default'
  Size of the radio.

• testId: string | Default: undefined
  Test id for testing purposes.

• value: string | Default: undefined
  Value of the radio.

Example

<script>
	import { Radio } from '@getprovi/craft-svelte';
	let selected = name;
</script>

<Radio testId="test-radio" id="id" label="Label" value="value">Here is some helper text.</Radio>

<!-- Group -->
<Radio bind:group="{selected}" id="id" label="{name}" value="value"
	>Here is some helper text.</Radio
>

Types

interface Props extends Omit<HTMLInputAttributes, 'size'> {
	class?: string | null | undefined;
	count?: string | unknown;
	group?: unknown | undefined;
	helperText?: string | undefined;
	id: HTMLLabelAttributes['for'];
	label: string;
	size?: 'sm' | 'default';
	testId?: string | undefined;
	value: unknown;
}