Checkbox

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

A checkbox built on Headless UI's Checkbox. Pass label (and optionally description) to render them beside it, wired up for screen readers; group related checkboxes in a Fieldset:

import { Checkbox, CheckboxGroup, Fieldset, Legend } from '@vinui/react';

<Fieldset>
  <Legend>Email me about</Legend>
  <CheckboxGroup>
    <Checkbox label="Comments" description="When someone comments on your post." defaultChecked />
    <Checkbox label="Mentions" name="mentions" />
  </CheckboxGroup>
</Fieldset>;

• indeterminate shows a dash, e.g. for a "select all" checkbox when only some items are selected.
• Without label, name it with aria-label (e.g. selecting a table row) or a Field and Label.
• With name, it submits value (default on) only while checked.

More to come

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