Dashral Pro is on the wayGet 30% off at launch

Dashral

Radio Group

A set of options where only one can be selected.

$ pnpm dlx shadcn@latest add https://dashral.com/r/radio-group.json

Every comment and status change.

Only when someone @mentions you.

Check the inbox yourself.

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/radio-group.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json
{
  "registries": {
    "@dashral": "https://dashral.com/r/{name}.json"
  }
}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/radio-group

Usage

example.tsx
import { RadioGroup } from "@/components/dashral/radio-group"

<RadioGroup
  label="Plan"
  defaultValue="team"
  options={[
    { value: "personal", label: "Personal", description: "1 developer" },
    { value: "team", label: "Team", description: "Up to 5 developers" },
  ]}
/>

Examples

Color

color sets the picked radio's color.

Pages whoever is on call.

Answered within a day.

Cards

variant="cards": click anywhere on a card; an option's icon shows on it.

API reference

RadioGroup

Also takes every prop of Radix Radio Group(opens in a new tab).

PropTypeDefault
value / defaultValuestring—
onValueChange(value: string) => void

Called with the new value.

—
options(string | { value; label?; description?; icon?; disabled? })[]

The radios. Required; icon shows on cards.

—
variant"default" | "cards"

cards draws each option as a bordered card you click anywhere on.

"default"
indicatorboolean

With cards: false hides the radio dot; the border shows what's picked.

true
orientation"horizontal" | "vertical"

Which arrow keys move.

—
color"primary" | "neutral" | "info" | "success" | "warning" | "destructive" | "highlight"

The color of every picked radio.

"primary"
labelReactNode

Shown above, linked to the control.

—
descriptionReactNode

A hint under the control.

—
errorboolean | ReactNode

true shows the error style; a message also shows under the control.

—
labelActionReactNode

At the end of the label's row, e.g. a “Forgot password?” link or the current value.

—
withAsteriskboolean

Marks the label with an asterisk, e.g. alongside required.

false
classNames{ root, label, description, error, group, item, radio }

Classes for each part.

—

Keyboard

KeysAction
TabMove into the group (to the picked item)
Arrow keysMove and pick
SpacePick the focused item

Accessibility

  • role="radiogroup" with role="radio" items. Label the group and each item.
  • label names the group through aria-labelledby; each item's label and description are linked to its radio.

Motion

  • The dot springs in when an item is picked.