# @elemental-ui-alpha/radio

> The radio component is used in forms when a user may select a single value from several options.

Latest version **0.0.2** (published 2020-04-24) · 0 weekly downloads

## Install

```sh
npm install @elemental-ui-alpha/radio
pnpm add @elemental-ui-alpha/radio
yarn add @elemental-ui-alpha/radio
bun add @elemental-ui-alpha/radio
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2020-04-24 |
| First published | 2020-04-23 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 10 |
| Unpacked size | 26.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | dsf-release-bot, mitchellhamilton |

## Links

- npm: https://www.npmjs.com/package/@elemental-ui-alpha/radio
- npm.io page: https://npm.io/package/@elemental-ui-alpha/radio

## Dependencies (10)

- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.8.3
- [@elemental-ui-alpha/a11y](https://npm.io/package/@elemental-ui-alpha/a11y.md) ^0.0.2
- [@elemental-ui-alpha/core](https://npm.io/package/@elemental-ui-alpha/core.md) ^0.0.2
- [@elemental-ui-alpha/icon](https://npm.io/package/@elemental-ui-alpha/icon.md) ^0.0.2
- [@elemental-ui-alpha/stack](https://npm.io/package/@elemental-ui-alpha/stack.md) ^0.0.2
- [@elemental-ui-alpha/theme](https://npm.io/package/@elemental-ui-alpha/theme.md) ^0.0.0
- [@elemental-ui-alpha/utils](https://npm.io/package/@elemental-ui-alpha/utils.md) ^0.0.2
- [@elemental-ui-alpha/fieldset](https://npm.io/package/@elemental-ui-alpha/fieldset.md) ^0.0.2
- [@elemental-ui-alpha/typography](https://npm.io/package/@elemental-ui-alpha/typography.md) ^0.0.2

## Recent versions

- 0.0.2 (latest) — 2020-04-24
- 0.0.1 — 2020-04-23
- 0.0.0 — 2020-04-23

## README

# Radio

```jsx
import { Radio, RadioGroup, RadioPrimitive } from '@elemental-ui-alpha/radio';
```

## Usage

Basic usage of radio.

```jsx live
<Radio defaultChecked>Uncontrolled</Radio>
```

### Disabled

```jsx live
<Stack gap="medium">
  <Radio disabled>Disabled</Radio>
  <Radio checked disabled>
    Checked + Disabled
  </Radio>
</Stack>
```

### Invalid

```jsx live
<Radio invalid checked={false}>
  Invalid
</Radio>
```

### Multiline Labels and Markup

```jsx live
<div style={{ width: 300 }}>
  <Radio>
    <>
      Radio buttons can include <strong>bold text</strong> and{' '}
      <a href="">anchors</a> which may wrap onto multiple lines.
    </>
  </Radio>
</div>
```

## Radio Group

It's recommended to use the radio group component, which normalizes the
`onChange` and `value` behaviour.

Most of the time you'll only want the updated value, this is simplified by
passing it back rather than the event. The original event is still available as
the second argument if needed.

The checkbox group uses `Stack` under-the-hood so you can distribute each item
along the X or Y axis, using the `direction` prop:

- `vertical` (default)
- `horizontal`

```jsx live
const [value, setValue] = React.useState('1');
const onChange = (val, event) => {
  setValue(val);
  console.log(event);
};

return (
  <RadioGroup
    direction="vertical"
    legend="radio group"
    onChange={onChange}
    value={value}
  >
    <Radio value="1">First</Radio>
    <Radio value="2">Second</Radio>
    <Radio value="3">Third</Radio>
  </RadioGroup>
);
```

## Radio Primitive

For custom radio behaviours use the `RadioPrimitive`. This component isn't
already wrapped in a label, allowing full control of semantics and layout.

```jsx live
const [checked, setChecked] = React.useState([]);
const onChange = event => {
  const item = event.target.value;
  setChecked(item);
};

return (
  <Columns gap="small" collapse="large">
    {['First', 'Second', 'Third'].map(v => {
      const isChecked = checked === v;
      const bg = isChecked ? 'shade' : null;

      return (
        <Flex
          align="center"
          as="label"
          background={bg}
          direction="horizontal"
          padding="small"
          rounding="small"
        >
          <RadioPrimitive
            key={v}
            value={v}
            checked={isChecked}
            onChange={onChange}
          />
          <Text marginLeft="small">{v}</Text>
        </Flex>
      );
    })}
  </Columns>
);
```

---
_Source: https://npm.io/package/@elemental-ui-alpha/radio · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._