Alternatives
- Tile — For displaying a single piece of information or interaction regarding a subject.
When to use
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 usage
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.
density
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.
The default density of a card is regular.
children
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 Card.
RadioCardGroup
Presents a list of options where only one choice can be selected in a Card interface.
name
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.
legend
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.
value
The currently selected value for the radio group.
onChange
The function to run in order to update state when the user selects an option.
onSelectFocusRef
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 primitives
RadioCardGroup exposes only one primitive: RadioCardGroup.Item
RadioCardGroup.Item
RadioCardGroup.Item can only be used inside a RadioCardGroup. It takes the same props as Card plus some extra radio props.
value
Used to describe the value of the radio item. This is the value that will be emitted to the onChange prop of CardRadioGroup
label
Used to describe the option. It takes a ReactNode so consumers are free to compose rich content.
Simple RadioCardGroup usage
RadioCardGroup can render RadioCardGroup.Item as children to present a list of cards a user can select from.
Complex RadioCardGroup usage
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.
Receipes
Cards content and groups of cards can be composed in a variety of ways. Below are some examples of the possiblities.