Native select

Selects one option with the native HTML select element.

Billing region

native-select-demo.tsx

"use client";import { NativeSelect } from "@/components/vip-ui/native-select";export function NativeSelectDemo() {  return (    <div className="w-full max-w-sm">      <NativeSelect label="Billing region" name="region" defaultValue="us">        <option value="us">United States</option>        <option value="ca">Canada</option>        <option value="gb">United Kingdom</option>      </NativeSelect>    </div>  );}

Installation

CLI

Manual

The CLI adds the files, packages, theme variables, and Tailwind plugin that this component uses. Before you run it, set up your project.

npm

yarn

pnpm

bun

pnpm dlx shadcn@latest add https://vip-ui.dev/r/vip-native-select.json

Groups

Team

native-select-groups-demo.tsx

"use client";import { NativeSelect } from "@/components/vip-ui/native-select";export function NativeSelectGroupsDemo() {  return (    <div className="w-full max-w-sm">      <NativeSelect label="Team" name="team" placeholder="Choose a team">        <optgroup label="Design">          <option value="interface">Interface design</option>          <option value="research">Research</option>        </optgroup>        <optgroup label="Engineering">          <option value="platform">Platform</option>          <option value="mobile" disabled>            Mobile (full)          </option>        </optgroup>      </NativeSelect>    </div>  );}

Disabled

Billing currency

native-select-disabled-demo.tsx

"use client";import { NativeSelect } from "@/components/vip-ui/native-select";export function NativeSelectDisabledDemo() {  return (    <div className="w-full max-w-sm">      <NativeSelect        label="Billing currency"        name="currency"        defaultValue="usd"        disabled      >        <option value="usd">US dollar</option>        <option value="eur">Euro</option>      </NativeSelect>    </div>  );}

Invalid selection

Set error to show a message below the field. Also install Form.

native-select-invalid-demo.tsx

"use client";import { useState } from "react";import { Button } from "@/components/vip-ui/button";import { Form } from "@/components/vip-ui/form";import { NativeSelect } from "@/components/vip-ui/native-select";export function NativeSelectInvalidDemo() {  const [team, setTeam] = useState("");  const [attempted, setAttempted] = useState(false);  const missing = attempted && !team;  return (    <Form      className="w-full max-w-sm gap-4"      validationBehavior="aria"      onSubmit={(event) => {        event.preventDefault();        setAttempted(true);      }}    >      <NativeSelect        label="Team"        name="team"        required        value={team}        placeholder="Choose a team"        isInvalid={missing}        error={missing ? "Choose a team to continue." : undefined}        onChange={(event) => setTeam(event.target.value)}      >        <option value="design">Design</option>        <option value="engineering">Engineering</option>        <option value="research">Research</option>      </NativeSelect>      <Button type="submit">Continue</Button>    </Form>  );}

Sizes

The browser draws the option list, so its size does not change.

Billing region

native-select-sizes-demo.tsx

"use client";import { NativeSelect } from "@/components/vip-ui/native-select";export function NativeSelectSizesDemo() {  return (    <div className="grid w-full max-w-xs gap-5">      <NativeSelect size="xs" label="Billing region" defaultValue="us">        <option value="us">United States</option>        <option value="ca">Canada</option>        <option value="gb">United Kingdom</option>      </NativeSelect>      <NativeSelect size="sm" label="Billing region" defaultValue="us">        <option value="us">United States</option>        <option value="ca">Canada</option>        <option value="gb">United Kingdom</option>      </NativeSelect>      <NativeSelect size="md" label="Billing region" defaultValue="us">        <option value="us">United States</option>        <option value="ca">Canada</option>        <option value="gb">United Kingdom</option>      </NativeSelect>      <NativeSelect label="Billing region" defaultValue="us">        <option value="us">United States</option>        <option value="ca">Canada</option>        <option value="gb">United Kingdom</option>      </NativeSelect>    </div>  );}

API reference

label: stringRequired: Visible label for the select.
size: "xs" | "sm" | "md" | "lg" | "xl" = "lg": Sets the size of the select box. The HTML size attribute is not available.
description: string: Help text below the select. Linked with aria-describedby.
error: string: Validation text below the select. Linked with aria-describedby. A value also marks the select invalid.
isInvalid: boolean = false: Marks the select invalid. A value for error does the same.
placeholder: string: Adds an empty option.
containerClassName: string: Classes for the outer field layout.