# @nami-ui/radio

> a radio component.

Latest version **0.0.5** (published 2021-03-31) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2021-03-31 |
| First published | 2021-02-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 11.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Bios Sun |
| Maintainers | biossun, biossun-by-nami-ui |
| Keywords | Radio, RadioGroup |

## Links

- npm: https://www.npmjs.com/package/@nami-ui/radio
- Repository: https://github.com/BiosSun/nami-ui
- Homepage: https://nami-ui.biossun.org/docs/radio
- Issues: https://github.com/BiosSun/nami-ui/issues
- npm.io page: https://npm.io/package/@nami-ui/radio

## Dependencies (6)

- [clsx](https://npm.io/package/clsx.md) ^1.1.1
- [nojiko](https://npm.io/package/nojiko.md) ^2.0.0
- [@nami-ui/icon](https://npm.io/package/@nami-ui/icon.md) ^0.0.4
- [@nami-ui/stack](https://npm.io/package/@nami-ui/stack.md) ^0.0.7
- [@nami-ui/utils](https://npm.io/package/@nami-ui/utils.md) ^0.0.6
- [@nami-ui/styles](https://npm.io/package/@nami-ui/styles.md) ^0.0.6

## Recent versions

- 0.0.5 (latest) — 2021-03-31
- 0.0.4 — 2021-03-05
- 0.0.3 — 2021-02-25
- 0.0.2 — 2021-02-21
- 0.0.1 — 2021-02-20

## README

---
id: radio
title: Radio
subtitle: 单选框
---

传统风格的单选框组件；

```jsx reactView
import { Radio } from '@nami-ui/radio'

export default () => {
  const [value, setValue] = useState('js')

  return (
    <>
      <Radio
        label="JavaScript"
        checked={value === 'js'}
        onChange={() => setValue('js')}
      />
      <Radio
        label="TypeScript"
        checked={value === 'ts'}
        onChange={() => setValue('ts')}
      />
    </>
  )
}
```

## 禁用

通过设置 `disabled` 属性，可以设置单选框为禁用状态：

```jsx reactView
import { Radio } from '@nami-ui/radio'

export default () => (
  <div>
    <Radio label="JavaScript" disabled />
    <Radio label="TypeScript" disabled defaultChecked />
  </div>
)
```

## 只读

而通过设置 `readOnly` 属性，则可以设置其为只读状态：

```jsx reactView
import { Radio } from '@nami-ui/radio'

export default () => (
  <div>
    <Radio label="JavaScript" readOnly />
    <Radio label="TypeScript" readOnly defaultChecked />
  </div>
)
```

## 分组

单选框往往都是成组出现的，而自行实现单选框组的选择逻辑需要写大量模式代码（就像上面示例中的代码），而通过 Radio.Group 组件则可以非常方便地实现分组功能：

```jsx reactView
import { Radio } from '@nami-ui/radio'

export default () => {
  const [checkedValue, setCheckedValue] = useState('js')

  return (
    <Radio.Group
      value={checkedValue}
      onChange={setCheckedValue}
    >
      <Radio value="js" label="JavaScript (js)" />
      <Radio value="ts" label="TypeScript (ts)" />
      <Radio value="cs" label="CoffeeScript (cs)" />
      <Radio value="as" label="ActionScript (as)" />
    </Radio.Group>
  )
}
```

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