Here are some common use cases for cards:
- To contain related groups of information or form fields
- To provide a summary of information
- To guide users to take actions
Card will fill the height and width of its container so it's up to the consumer to control width and height of the card through a container.
For more concrete examples check out the patterns section.
The density of a card is defined as the white space between the border and the content area. It's set through the
density prop and supports three values: compact, regular, spacious.
density of a card is regular.
The card component itself is a simple container and is not interactive. Consumers are free to compose rich content inside the card, similar to how normal page is composed.
Checkout out the patterns section for some examples of what's possible inside a
Presents a list of options where only one choice can be selected in a
A unique name for the radio group to help identify it in the dom tree for testing purposes. The user will experience strange behaviour if there are 2 radio groups with the same name on a page. If you are unsure about the name, it is better to leave it empty which will result in the componenet assigning itself a unique random number.
Used to describe the purpose of the radio group to help with accessibility. This value is not rendered to the screen and is only seen by screen readers.
The currently selected value for the radio group.
The function to run in order to update state when the user selects an option.
Sometimes selecting a radio card can reveal a sub-form for the user to select from. In this instance, we want to focus the sub-form as soon as the user selects the relevant radio card. The
onSelectFocusRef prop can be used to achieve this by passing a ref of a focusable element from the sub-form to it.
Check this example for more details.
RadioCardGroup exposes only one primitive:
RadioCardGroup.Item can only be used inside a
RadioCardGroup. It takes the same props as
Card plus some extra radio props.
Used to describe the value of the radio item. This is the value that will be emitted to the
onChange prop of
Used to describe the option. It takes a
ReactNode so consumers are free to compose rich content.
RadioCardGroup can render
RadioCardGroup.Item as children to present a list of cards a user can select from.
In this example we want to make the user select specific access levels in the form of checkboxes when the "Partial access" card is selected.
Cards content and groups of cards can be composed in a variety of ways. Below are some examples of the possiblities.