Select

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 native <select>, styled to match the other fields, built on Headless UI's Select. It uses the platform's own picker, which suits plain forms and mobile; use Listbox when options need icons or rich content:

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

<Field>
  <Label>Country</Label>
  <Select name="country" defaultValue="">
    <option value="" disabled>
      Select a country…
    </option>
    <option value="hr">Croatia</option>
    <option value="de">Germany</option>
  </Select>
</Field>;

• A disabled, empty first option acts as a placeholder and is shown muted while selected.
• invalid gives a red border and sets aria-invalid. <optgroup> and multiple work as usual.

More to come

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