vinui

Components

Radio Group

Choose one option from a list, with labels and descriptions.

Installation

Install @vinui/react from GitHub with pnpm, then import its stylesheet once, in your root layout or entry file:

pnpm add github:vindotski/vinui#path:packages/react

import '@vinui/react/styles.css';

Usage

Choose exactly one option, built on Headless UI's RadioGroup. Each Radio takes its own label and optional description, and arrow keys move between options:

import { Radio, RadioGroup } from '@vinui/react';

<RadioGroup aria-label="Notifications" value={setting} onChange={setSetting}>
  <Radio value="all" label="Everything" description="Every comment and mention." />
  <Radio value="mentions" label="Mentions only" />
  <Radio value="none" label="Nothing" disabled />
</RadioGroup>;

Use by for object values and name to submit with a form.

More to come

Detailed examples, keyboard interaction and the full component API are on their way.