Radio Group

A group of mutually exclusive choices drawn as cards. The selected card takes the accent colour and its dot springs in. Only the selected radio is a tab stop, and on the web the arrow keys move the selection, skipping disabled options and wrapping at the ends, as a native radio group does. Built for React Native and Expo with react-native only; this page previews it in the browser through react-native-web.

Installation

CLI

npx @modus-ui/cli add radio-group

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/radio-group.tsx.
3. Paste the code.

It needs no packages beyond react-native, which your Expo or React Native app already has.

Usage

import { useState } from "react";
import { RadioGroup } from "@/components/ui/radio-group";

export default function Example() {
  const [plan, setPlan] = useState("pro");

  return (
    <RadioGroup
      label="Plan"
      value={plan}
      onChange={setPlan}
      options={[
        { value: "free", label: "Free", description: "One project" },
        { value: "pro", label: "Pro", description: "Unlimited projects" },
      ]}
    />
  );
}

Props