Checkbox - React

CheckboxInput

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

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>

System Modifiers

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

• display
• flex-child
• grid-child
• margin
• position

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>

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:

• display
• flex-child
• grid-child
• margin
• position