Radio

A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.

Darko

Jacob

Perry

Nuuls

import {
  Radio,
  FormControlLabel
} from '@streamelements/frontend-ui';

// ...

<Radio.Root>
  <FormControlLabel css={{ display: 'grid', mb: '0.5rem' }}>
    <Radio.Item value="darko" />
    Darko
  </FormControlLabel>
  <FormControlLabel css={{ display: 'grid', mb: '0.5rem' }}>
    <Radio.Item value="jacob" />
    Jacob
  </FormControlLabel>
  <FormControlLabel css={{ display: 'grid', mb: '0.5rem' }}>
    <Radio.Item value="perry" />
    Perry
  </FormControlLabel>
  <FormControlLabel css={{ display: 'grid', mb: '0.5rem' }}>
    <Radio.Item value="Nuuls" disabled />
    Nuuls
  </FormControlLabel>
</Radio.Root>

API

The Chip component exposes the following props for style changes:

Root

Name	Type	Default value	Description
asChild	boolean	false	Change the component to the HTML tag or custom component of the only child. Merges original props with provided child.
defaultValue	string	–	The value of the radio item that should be checked when initially rendered. Use when using it as uncontrolled component.
value	string	–	The controlled value of the radio item to check. Should be used in conjunction withonValueChange.
onValueChange	Function	–	Event handler called when the value changes. (value: string) => void
name	string	–	The name of the group. Submitted with its owning form as part of a name/value pair.
required	boolean	–	When true, indicates that the user must check a radio item before the owning form can be submitted.
orientation	"horizontal" | "vertical"	undefined	The orientation of the component. When horizontal, left and right arrow select previous and next. When vertical, up and down arrows select the previous or next item.
dir	"ltr" | "rtl"	ltr	The reading direction of the radio group. If omitted, assumes LTR (left-to-right) reading mode.
loop	boolean	true	When true, keyboard navigation will loop from last item to first, and vice versa.

Item

Name	Type	Default value	Description
css	CSS	{}	Pass on additional styling utilizing Stitches' tokens
value	string	–	The controlled value of the radio item to check. Should be used in conjunction withonValueChange.
disabled	boolean	–	When true, prevents the user from interacting with the radio item.
required	boolean	–	When true, indicates that the user must check the radio item before the owning form can be submitted.