zidanecomponents/ChoiceCards
import { … } from 'zidane-ui'ui/src/components/ChoiceCards.tsx
Components#
ChoiceCardsComponent#
Renders a radio group of cards. The chosen card is raised, with an accent ring.
function ChoiceCards<T extends string>(props: ChoiceCardsProps<T>): ElementType parameters
| Name | Type | Description |
|---|---|---|
| T | extends string |
Parameters
| Name | Type | Description |
|---|---|---|
| props | ChoiceCardsProps<T> | Component props. |
Returns
ElementProps
| Name | Type | Default | Description |
|---|---|---|---|
| ariaLabel? | string | Accessible name of the radio group. | |
| className? | string | Extra classes on the group. | |
| columns? | 1 | 2 | 3 | 4 | 3 | Cards per row on wide screens. Narrow screens stack them. |
| numbered? | boolean | Let the keys 1 to 9 pick the cards while the group has focus, and show the numbers while it has keyboard focus. | |
| onChange | (value: T) => void | Called with the value of the card picked by click or keyboard. | |
| options | readonly ChoiceCardOption<T>[] | The cards, in order. | |
| style? | CSSProperties | Inline styles on the root element, merged after the component's own. | |
| value | T | undefined | The value of the chosen card. |
Interfaces#
ChoiceCardOptionInterface#
One card of a ChoiceCards group.
interface ChoiceCardOption<T extends string>Type parameters
| Name | Type | Description |
|---|---|---|
| T | extends string |
Properties
| Name | Type | Description |
|---|---|---|
| badge? | ReactNode | A short mark at the end of the title line, such as "recommended". |
| description? | ReactNode | One or two lines under the title. |
| disabled? | boolean | Grey the card out and skip it in keyboard navigation. |
| icon? | string | Icon class ( |
| preview? | ReactNode | Content above the title, such as a theme thumbnail or a small demo. |
| title | ReactNode | The card's title. |
| value | T | The value reported to |
| visual? | ReactNode | A visual before the title, such as a |
ChoiceCardsPropsInterface#
Props for ChoiceCards.
interface ChoiceCardsProps<T extends string>Type parameters
| Name | Type | Description |
|---|---|---|
| T | extends string |
Properties
| Name | Type | Default | Description |
|---|---|---|---|
| ariaLabel? | string | Accessible name of the radio group. | |
| className? | string | Extra classes on the group. | |
| columns? | 1 | 2 | 3 | 4 | 3 | Cards per row on wide screens. Narrow screens stack them. |
| numbered? | boolean | Let the keys 1 to 9 pick the cards while the group has focus, and show the numbers while it has keyboard focus. | |
| onChange | (value: T) => void | Called with the value of the card picked by click or keyboard. | |
| options | readonly ChoiceCardOption<T>[] | The cards, in order. | |
| style? | CSSProperties | Inline styles on the root element, merged after the component's own. | |
| value | T | undefined | The value of the chosen card. |