RadioBox

Basic usage

const Demo = () => {
  const [selectedValue, setSelectedValue] = useState<string | null>(null);

  return (
    <RadioGroup
      name="cardType"
      value={selectedValue}
      onChange={(event) => {
        setSelectedValue(event?.target.value);
      }}
      direction="column"
      className="gap-8"
    >
      <RadioBox
        label="Administrator"
        description="An admin can set-up the account"
        value="administrator"
      />
      <RadioBox
        label="Controller"
        description="A controller has access to all accounting features"
        value="controller"
      />
      <RadioBox
        label="Requester"
        description="A requester can request and make purchases"
        value="requester"
      />
    </RadioGroup>
  );
};

Default value

RadioGroup only works in a controlled mode. To define a default value, use useState.

const Demo = () => {
  const [selectedValue, setSelectedValue] = useState<string | null>(
    "administrator",
  );

  return (
    <RadioGroup
      name="cardType"
      value={selectedValue}
      onChange={(event) => {
        setSelectedValue(event?.target.value);
      }}
      direction="column"
      className="gap-8"
    >
      <RadioBox
        label="Administrator"
        description="An admin can set-up the account"
        value="administrator"
      />
      <RadioBox
        label="Controller"
        description="A controller has access to all accounting features"
        value="controller"
      />
      <RadioBox
        label="Requester"
        description="A requester can request and make purchases"
        value="requester"
      />
    </RadioGroup>
  );
};

With icon

Use the iconName prop to add an icon to the RadioBox.

<RadioGroup {...otherProps}>
  <RadioBox
    iconName="single-purchase-card"
    label="Single use"
    description="If you need to make a one-time payment"
    value="singleUse"
  />
  <RadioBox
    iconName="recurring-card"
    label="Recurring"
    description="If you want to manage your subscriptions"
    value="recurring"
  />
</RadioGroup>

Without the description

The description prop is optional.

<RadioGroup {...otherProps}>
  <RadioBox label="Yes" value="yes" />
  <RadioBox label="No" value="no" />
</RadioGroup>

Icon variant

Use the iconVariant prop to change the background color of the icon. It defaults to purple.

<RadioGroup {...otherProps}>
  <RadioBox
    iconName="card-lightning"
    iconVariant="ocean"
    label="Single use"
    description="If you need to make a one-time payment"
    value="singleUse"
  />
  <RadioBox
    iconName="card-rounded-arrows"
    iconVariant="emerald"
    label="Recurring"
    description="If you want to manage your subscriptions"
    value="recurring"
  />
</RadioGroup>

Variant

Use the variant prop to control the visual style of the RadioBox. The RadioBox comes with two visual styles: default (default) and magicGradient.

<RadioGroup {...otherProps}>
  <RadioBox
    variant="magicGradient"
    iconName="sparkle"
    label="Autopilot"
    description="Let Spendesk categorize your expenses automatically"
    value="autopilot"
  />
  <RadioBox
    variant="magicGradient"
    iconName="pen"
    label="Manual"
    description="Categorize each expense yourself"
    value="manual"
  />
</RadioGroup>

Custom content

Instead of label and description, you can pass children to render custom content inside the RadioBox. children and label / description are mutually exclusive: use one or the other.

<RadioGroup {...otherProps}>
  <RadioBox value="monthly">
    <div className="flex items-center justify-between gap-16">
      <span className="title-m text-content-primary">Monthly</span>
      <Tag variant="neutral">€10 / month</Tag>
    </div>
  </RadioBox>
  <RadioBox value="yearly">
    <div className="flex items-center justify-between gap-16">
      <span className="title-m text-content-primary">Yearly</span>
      <Tag variant="success">€100 / year</Tag>
    </div>
  </RadioBox>
</RadioGroup>