Radio - React

RadioInput

import { RadioInput } from '@sky-uk/ui-core';

For fully composed form element examples see Control Field.

RadioInput is a form component that maps closely to a native input element of the type radio.

It supports all of the same attributes. (See MDN).

<Flex $gap={4}>
  <RadioInput />
  <RadioInput checked />
  <RadioInput defaultChecked />
</Flex>

<Flex $gap={4}>
  <RadioInput />
  <RadioInput checked />
  <RadioInput defaultChecked />
</Flex>

System Modifiers

The RadioInput component also accepts props applied using the following system modifiers:

RadioIndicator

import { RadioIndicator } from '@sky-uk/ui-core';

RadioIndicator can be used if you need radio styling without the underlying input.

<Flex $gap={4}>
  <RadioIndicator />
  <RadioIndicator $checked />
  <RadioIndicator $focused />
  <RadioIndicator $disabled />
  <RadioIndicator $readOnly />
  <RadioIndicator $state="error" />
</Flex>

<Flex $gap={4}>
  <RadioIndicator />
  <RadioIndicator $checked />
  <RadioIndicator $focused />
  <RadioIndicator $disabled />
  <RadioIndicator $readOnly />
  <RadioIndicator $state="error" />
</Flex>

Props

$checked

boolean

$focused

boolean

$disabled

boolean

$hover

boolean

$readOnly

boolean

$state

error

Accessibility

Please refer to the W3C Forms Concepts guide when working with forms.

System Modifiers

The RadioIndicator component also accepts props applied using the following system modifiers: