Radio

Radios are used to select a single state from multiple options.

The difference from Select is that Radio is visible to the user and can facilitate the comparison of choice, which means there shouldn't be too many of them.

Simple Radios

Sizes

To have the larger or smaller radios, use the size property.

Small

Medium (default)

Large

Controlled Radios

You can use the checked, and onChange properties to control the behaviour of the radio.

Label

With RadioGroup

RadioGroup is a helpful wrapper used to group and manage radio controls with an easier API. RadioGroup can also be controlled/uncontrolled like the radios.
To learn more about RadioGroup's API, read it's documentation.

Burger

Sushi

Kebab

API

Learn more about the properties and the customization points.

Usage

import Radio from "@sonnat/ui/Radio";

//or
import { Radio } from "@sonnat/ui";

Properties

Note that the documentation avoids mentioning all the native props (there are a lot) in this section of the components.

Radio Properties
Name	Type	Default	Description
className	string	-	Append to the class names applied to the component so you can override or extend the styles.
label	string	-	If `label` was provided, a `<label>` element will be rendered next to the radio.
name	string	-	The name of the radio.
value	string	-	The value of the radio. The DOM API casts this to a string. The browser uses `"on"` as the default value.
size	"large" \| "medium" \| "small"	"medium"	The size of the radio.
autoFocus	boolean	false	If `true`, the radio will be focused automatically.
fluid	boolean	false	If `true`, the radio will fill the entire width of the parent.
readOnly	boolean	false	If `true`, the radio will be read-only.
checked	boolean	-	If `true`, the radio will be checked.
defaultChecked	boolean	-	The default state of `checked`. Use when the component is not controlled.
disabled	boolean	false	If `true`, the radio will be disabled.
required	boolean	false	If `true`, the radio will be required.
hasError	boolean	false	If `true`, the radio will indicate invalid input.
inputProps	object	-	The properties applied to the `input` element.
labelProps	object	-	The properties applied to the `label` element.
onChange	function	-	The callback fires when the state has changed. Signature: `function(checkedState: boolean) => void`
The `ref` is forwarded to the root element. Any other properties supplied will be provided to the root element.