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

# Radio — React

Radios offer mutually exclusive options for users to select.

## RadioInput

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

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

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

---

### System Modifiers

The `RadioInput` 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/)

---

## RadioIndicator

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

---

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

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

---

### System Modifiers

The `RadioIndicator` 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/)