---
title: "Checkbox — React"
canonical: https://sky-ui.cf.sky.com/components/checkbox/react
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---

# Checkbox — React

Checkboxes offers options for users to select.

## CheckboxInput

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

---

**Note:** For fully composed form element examples see [Control Field](/components/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)](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/Checkbox).

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

---

### System Modifiers

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

- [display](/core/system/display/)
- [flex-child](/core/system/flex-child/)
- [grid-child](/core/system/grid-child/)
- [margin](/core/system/margin/)
- [position](/core/system/position/)

---

## CheckboxIndicator

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

---

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

```tsx
<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](https://www.w3.org/WAI/tutorials/forms/) guide when working with forms.

---

### System Modifiers

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

- [display](/core/system/display/)
- [flex-child](/core/system/flex-child/)
- [grid-child](/core/system/grid-child/)
- [margin](/core/system/margin/)
- [position](/core/system/position/)