47 lines
1.3 KiB
Markdown
47 lines
1.3 KiB
Markdown
|
# @fluentui/react-radio
|
||
|
|
|
||
|
|
**React Radio components for [Fluent UI React](https://react.fluentui.dev)**
|
||
|
|
|
||
|
|
A Radio allows a user to select a single value from two or more options. All Radios with the same `name` are considered to be part of the same group. However, a `RadioGroup` is recommended to add a group label, formatting, and other functionality.
|
||
|
|
|
||
|
|
### Usage
|
||
|
|
|
||
|
|
Import `Radio` and `RadioGroup`:
|
||
|
|
|
||
|
|
```js
|
||
|
|
// From @fluentui/react-components
|
||
|
|
import { Radio, RadioGroup } from '@fluentui/react-components';
|
||
|
|
|
||
|
|
// Directly from @fluentui/react-radio
|
||
|
|
import { Radio, RadioGroup } from '@fluentui/react-radio';
|
||
|
|
```
|
||
|
|
|
||
|
|
#### Examples
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
<RadioGroup defaultValue="B">
|
||
|
|
<Radio value="A" label="Option A" />
|
||
|
|
<Radio value="B" label="Option B" />
|
||
|
|
<Radio value="C" label="Option C" />
|
||
|
|
<Radio value="D" label="Option D" />
|
||
|
|
</RadioGroup>
|
||
|
|
|
||
|
|
<RadioGroup value={value} onChange={(_, data) => setValue(data.value)}>
|
||
|
|
<Radio value="A" label="Option A" />
|
||
|
|
<Radio value="B" label="Option B" />
|
||
|
|
<Radio value="C" label="Option C" />
|
||
|
|
<Radio value="D" label="Option D" />
|
||
|
|
</RadioGroup>
|
||
|
|
```
|
||
|
|
|
||
|
|
See [Fluent UI Storybook](https://react.fluentui.dev/) for more detailed usage examples.
|
||
|
|
|
||
|
|
Alternatively, run Storybook locally with:
|
||
|
|
|
||
|
|
1. `yarn start`
|
||
|
|
2. Select `react-radio` from the list.
|
||
|
|
|
||
|
|
### Specification
|
||
|
|
|
||
|
|
See [Spec.md](./Spec.md).
|