Select

In the app

The native select in the app’s view-switcher clothes. No custom listbox: the platform picker is faster and works on every device.

@varick/ui/components/selectAdded 2 Sept 2026

Usage

import { Select } from "@varick/ui/components/select";

export function Example() {
  return (
    <Select value={period} onChange={(e) => setPeriod(e.target.value)}>
      <option value="day">Today</option>
      <option value="week">This week</option>
    </Select>
  );
}

API reference

Every component also accepts className and the native props of its root element.

Prop	Type	Default	Description
invalid	boolean	false	Red border and aria-invalid.
children	<option>	required	Native options and optgroups.
...props	ComponentProps<'select'>		value, onChange, disabled, name.

Accessibility

A native select: the platform handles keyboard, type-ahead and screen readers. Give it a label.

Styles

The CSS as it appears in the app. The live component above is the same values as Tailwind classes.

.view-select {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 0 32px 0 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-high);
  background: #FFFFFF;
  appearance: none;
}
.view-select:hover { border-color: var(--hairline-hover); background: var(--fill-soft); }