Select

since v0.2.3

Styled native select — use when the option list is static and short.

Mirrors Input exactly (same surface, hairline border, focus voltage, label/error/hint

treatment); the only differences are <select> instead of <input>, appearance-none

to suppress the native chevron, right-padding for the custom chevron SVG, and the

absolutely-positioned chevron itself.

Install

Add the package and import the component.

pnpm add @hey-mike/tungsten

pnpm add @hey-mike/tungsten

import { Select } from '@hey-mike/tungsten';

import { Select } from '@hey-mike/tungsten';

Preview

Same fixtures used by the visual-regression suite.

Open snapshot in new view →

Usage

apps/docs/app/snapshots/select/page.tsx

import { Select } from '@hey-mike/tungsten';
import { VariantGrid } from '../_components/VariantGrid';

export default function SelectSnapshot() {
  return (
    <VariantGrid
      title="Select"
      variants={[
        {
          label: 'default',
          node: (
            <Select defaultValue="b">
              <option value="a">Option A</option>
              <option value="b">Option B</option>
              <option value="c">Option C</option>
            </Select>
          ),
        },
        {
          label: 'disabled',
          node: (
            <Select defaultValue="b" disabled>
              <option value="a">Option A</option>
              <option value="b">Option B</option>
            </Select>
          ),
        },
      ]}
    />
  );
}

import { Select } from '@hey-mike/tungsten';
import { VariantGrid } from '../_components/VariantGrid';

export default function SelectSnapshot() {
  return (
    <VariantGrid
      title="Select"
      variants={[
        {
          label: 'default',
          node: (
            <Select defaultValue="b">
              <option value="a">Option A</option>
              <option value="b">Option B</option>
              <option value="c">Option C</option>
            </Select>
          ),
        },
        {
          label: 'disabled',
          node: (
            <Select defaultValue="b" disabled>
              <option value="a">Option A</option>
              <option value="b">Option B</option>
            </Select>
          ),
        },
      ]}
    />
  );
}

Props

Surface specific to <Select />.

Prop	Type	Default	Description
label	`string`	—	Inline label. Omit when wrapping in a `<FormField>`.
error	`string`	—	Error message; switches focus voltage to error palette.
hint	`string`	—	Help text shown below the select. Suppressed when `error` is set.

Used in recipes