Components

Radio

Radios are used when only one choice may be selected in a series of options.

If options are not mutually exclusive, or there is a single option, use a checkbox instead.

Import

import { Radio, RadioGroup } from '@outfitio/outkit';

Radios must always be rendered within a radioGroup component.

You can also display the radio group horizontally by passing the isInline prop.

Pass the size prop to change the size of the Radio. Values can be either sm, md or lg.

Screen readers convey the state of the radio automatically.
Use the disabled prop to apply the HTML disabled attribute to the radio input. This prevents users from being able to interact with the radio, and conveys its inactive state to assistive technologies.
In the event there is no visible label for the radio, use the aria-label prop to provide a label for assistive technologies. Alternatively, use aria-labelledby to point to an alternate label.
Move focus to the radio button group using the tab key (or shift + tab when tabbing backwards). Use the up and down arrow keys to change which radio button is selected.

Radio buttons should:

Always be part of a radio group that includes at least two or more choices, where users can only select one option
Have a default option selected when possible
Be organised in a logical order, such as alphabetical, numerical, time-based, or another clear system
Be used with an associated label component
Use sentence case for radio labels, where the first word is capitalised and the rest are lowercase, unless the term is a proper noun

Name	Type	Default	Description
id	`string`		The id assigned to input field
name	`string`		The name of the input field in a radio (Useful for form submission)
value	`string` or `number`		The value to be used in the radio input. This is the value that will be returned on form submission
variantColor	`string`		The color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red")
defaultIsChecked	`boolean`		If `true`, the radio will be initially checked
isChecked	`boolean`		If `true`, the radio will be checked. You'll need to pass `onChange` to update it's value (since it's now controlled)
isFullWidth	`boolean`		If `true`, the radio should take up the full width of the parent
size	`sm`, `md`, `lg`	`md`	The size (width and height) of the radio
isDisabled	`boolean`		If `true`, the radio will be disabled
isInvalid	`boolean`		If `true`, the radio is marked as invalid. Changes style of unchecked state
children	`React.ReactNode`		The children of the radio
onChange	`function`		Function called when the state of the radio changes
onBlur	`function`		Function called when you blur out of the radio
onFocus	`function`		Function called when the radio receive focus
aria-label	`string`		An accessible label for the radio in event there's no visible label or `children` was passed
aria-labelledby	`string`		Id that points to the label for the radio in event no `children` was passed