Robin Malfait
00cc8c50e3
* add Alert component * expose Alert * rename forgotten FLYOUT to POPOVER * use PopoverRenderPropArg * organize imports in a consistent way * ensure Portals behave as expected Portals can be nested from a React perspective, however in the DOM they are rendered as siblings, this is mostly fine. However, when they are rendered inside a Dialog, the Dialog itself is marked with `role="modal"` which makes all the other content inert. This means that rendering Menu.Items in a Portal or an Alert in a portal makes it non-interactable. Alerts are not even announced. To fix this, we ensure that we make the `root` of the Portal the actual dialog. This allows you to still interact with it, because an open modal is the "root" for the assistive technology. But there is a catch, a Dialog in a Dialog *can* render as a sibling, because you force the focus into the new Dialog. So we also ensured that Dialogs are always rendered in the portal root, and not inside another Dialog. * add dialog with alert example * add internal Description component * add internal Label component * add RadioGroup component * expose RadioGroup * add RadioGroup example * ensure to include tha RadioGroup.Option own id * update changelog * split documentation
3.3 KiB
3.3 KiB
RadioGroup
A component for grouping radio options.
Installation
# npm
npm install @headlessui/react
# Yarn
yarn add @headlessui/react
Basic example
import React, { useState } from 'react'
import { RadioGroup } from '@headlessui/react'
function Example() {
let [deliveryMethod, setDeliveryMethod] = useState(undefined)
return (
<RadioGroup value={deliveryMethod} onChange={setDeliveryMethod}>
<RadioGroup.Label>Pizza Delivery</RadioGroup.Label>
<RadioGroup.Option value="pickup">Pickup</RadioGroup.Option>
<RadioGroup.Option value="home-delivery">Home delivery</RadioGroup.Option>
<RadioGroup.Option value="dine-in">Dine in</RadioGroup.Option>
</RadioGroup>
)
}
Component API
RadioGroup
let [deliveryMethod, setDeliveryMethod] = useState(undefined)
<RadioGroup value={deliveryMethod} onChange={setDeliveryMethod}>
<RadioGroup.Option value="pickup">Pickup</RadioGroup.Option>
<RadioGroup.Option value="home-delivery">Home delivery</RadioGroup.Option>
<RadioGroup.Option value="dine-in">Dine in</RadioGroup.Option>
</RadioGroup>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
as |
String | Component | div |
The element or component the RadioGroup should render as. |
value |
T | undefined |
undefined |
The current selected value in the RadioGroup. |
onChange |
Function | undefined |
The function called to update the RadioGroup value. |
Render prop object
- None
RadioGroup.Option
let [deliveryMethod, setDeliveryMethod] = useState(undefined)
<RadioGroup value={deliveryMethod} onChange={setDeliveryMethod}>
<RadioGroup.Option value="pickup">Pickup</RadioGroup.Option>
<RadioGroup.Option value="home-delivery">Home delivery</RadioGroup.Option>
<RadioGroup.Option value="dine-in">Dine in</RadioGroup.Option>
</RadioGroup>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
as |
String | Component | div |
The element or component the RadioGroup should render as. |
value |
T | undefined |
undefined |
The value of the current RadioGroup.Option. The type should match the type of the value in the RadioGroup component. |
Render prop object
| Prop | Type | Description |
|---|---|---|
active |
Boolean | Whether or not the option is active (using the mouse or keyboard). |
checked |
Boolean | Whether or not the current option is the checked value. |