Input

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 text input built on Headless UI's Input. Put it in a Field to label it:

import { ErrorMessage, Field, Input, Label } from '@vinui/react';

<Field>
  <Label>Username</Label>
  <Input name="username" invalid={taken} />
  {taken && <ErrorMessage>That username is taken.</ErrorMessage>}
</Field>;

invalid gives the input a red border and sets aria-invalid. All native input props and types (email, password, number, date, …) work as usual.

More to come

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