Radio Cards

New

Set of interactive cards where only one can be selected at a time.

Usage

Put one or more RadioCard components inside RadioCards.

import { RadioCards, RadioCard } from "stylus-ui/RadioCards";

export default () => (
  <RadioCards defaultValue="default">
    <RadioCard value="default" label="Default" />
    <RadioCard value="comfortable" label="Comfortable" />
    <RadioCard value="compact" label="Compact" />
  </RadioCards>
);

Icons

Import and pass a FontAwesome icon to icon to display it beside the label on the card. To display a different icon when the card is selected, pass a FontAwesome icon to selectedIcon. This is helpful for toggling between regular and solid icon states.

import { RadioCards, RadioCard } from "stylus-ui/RadioCards";
import { faImage, faVideo, faMusic } from "@fortawesome/pro-regular-svg-icons";
import {
  faImage as faSolidImage,
  faVideo as faSolidVideo,
  faMusic as faSolidMusic,
} from "@fortawesome/pro-solid-svg-icons";

export default () => (
  <RadioCards defaultValue="image">
    <RadioCard
      value="image"
      icon={faImage}
      selectedIcon={faSolidImage}
      label="Image"
    />
    <RadioCard
      value="video"
      icon={faVideo}
      selectedIcon={faSolidVideo}
      label="Video"
    />
    <RadioCard
      value="music"
      icon={faMusic}
      selectedIcon={faSolidMusic}
      label="Music"
    />
  </RadioCards>
);

Dark mode

import { RadioCards, RadioCard } from "stylus-ui/RadioCards";
import { faImage, faVideo, faMusic } from "@fortawesome/pro-regular-svg-icons";
import {
  faImage as faSolidImage,
  faVideo as faSolidVideo,
  faMusic as faSolidMusic,
} from "@fortawesome/pro-solid-svg-icons";

export default () => (
  <RadioCards theme="dark" defaultValue="image">
    <RadioCard
      value="image"
      icon={faImage}
      selectedIcon={faSolidImage}
      label="Image"
    />
    <RadioCard
      value="video"
      icon={faVideo}
      selectedIcon={faSolidVideo}
      label="Video"
    />
    <RadioCard
      value="music"
      icon={faMusic}
      selectedIcon={faSolidMusic}
      label="Music"
    />
  </RadioCards>
);

Orientation

By default, the contents of each RadioCard are displayed vertically. To display them horizontally, set orientation to horizontal. This can be set on the RadioCards parent, or on individual RadioCard components.

import { RadioCards, RadioCard } from "stylus-ui/RadioCards";
import { faImage, faVideo, faMusic } from "@fortawesome/pro-regular-svg-icons";
import {
  faImage as faSolidImage,
  faVideo as faSolidVideo,
  faMusic as faSolidMusic,
} from "@fortawesome/pro-solid-svg-icons";

export default () => (
  <RadioCards orientation="horizontal">
    <RadioCard
      value="image"
      icon={faImage}
      selectedIcon={faSolidImage}
      label="Image"
    />
    <RadioCard
      value="video"
      icon={faVideo}
      selectedIcon={faSolidVideo}
      label="Video"
    />
    <RadioCard
      value="music"
      icon={faMusic}
      selectedIcon={faSolidMusic}
      label="Music"
    />
  </RadioCards>
);

Disabled

The entire group can by disabled by using the disabled prop on RadioCards. Beware of accessibility drawbacks when disabling buttons.

import { RadioCards, RadioCard } from "stylus-ui/RadioCards";

export default () => (
  <RadioCards disabled>
    <RadioCard value="default" label="Default" />
    <RadioCard value="comfortable" label="Comfortable" />
    <RadioCard value="compact" label="Compact" />
  </RadioCards>
);

The disabled prop can also be used to disable a specific RadioCard.

import { RadioCards, RadioCard } from "stylus-ui/RadioCards";

export default () => (
  <RadioCards>
    <RadioCard value="default" label="Default" />
    <RadioCard value="comfortable" label="Comfortable" />
    <RadioCard value="compact" label="Compact" disabled />
  </RadioCards>
);

Controlled state

By default, RadioCards is uncontrolled. To make it controlled, set value and onValueChange.

import { RadioCards, RadioCard } from "stylus-ui/RadioCards";
import { useState } from "react";

export default () => {
  const [radioValue, setRadioValue] = useState("default");

  return (
    <RadioCards value={radioValue} onValueChange={setRadioValue}>
      <RadioCard value="default" label="Default" />
      <RadioCard value="comfortable" label="Comfortable" />
      <RadioCard value="compact" label="Compact" />
    </RadioCards>
  );
};

API Reference

`RadioCards`

Contains all the parts of a radio card group.

Inherits properties from HTMLElement.

Prop	Type	Default
`children`	`ReactNode`
`defaultValue`	`string`
`disabled`	`boolean`
`label`	`string`
`loop`	`boolean`	`true`
`onValueChange`	`(value: string) => void`
`orientation`	`"horizontal""vertical"`	`"vertical"`
`required`	`boolean`
`theme`	`"light""dark"`	`"light"`
`value`	`string`

`RadioCard`

An item in the group that can be checked. An input will also render when used within a form to ensure events propagate correctly.

Inherits properties from HTMLButtonElement.

Prop	Type	Default
`label`	`string`
`asChild`	`boolean`	`false`
`children`	`ReactNode`
`defaultValue`	`string`
`disabled`	`boolean`
`loop`	`boolean`	`true`
`orientation`	`"horizontal""vertical"`	`"vertical"`
`required`	`boolean`
`theme`	`"light""dark"`	`"light"`
`value`	`string`