Checkbox - React

CheckboxInput

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

For fully composed form element examples see Control Field.

CheckboxInput is a form component that maps closely to a native input element of the type checkbox.

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

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

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

System Modifiers

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

CheckboxIndicator

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

CheckboxIndicator can be used if you need checkbox styling without the underlying input.

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

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

Props

$checked

boolean

$focused

boolean

$disabled

boolean

$readOnly

boolean

$state

default
error

Accessibility

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

System Modifiers

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