Switch (Toggle)

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

An on/off toggle built on Headless UI's Switch:

import { Switch } from '@vinui/react';

<Switch aria-label="Notifications" checked={enabled} onChange={setEnabled} />

<label>
  <Switch defaultChecked size="sm" />
  Email me about new comments
</label>

Sizes are sm and md (default). Pass name to submit with a form; it sends value (default on) only while on, like a checkbox.

More to come

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