Components

Native Select

The platform select, visually aligned with Dowel inputs and fully resilient in forms.

Settings field

NativeSelect works inside Field, submits without client JavaScript, and uses the operating system picker on touch devices.

Default branch

New merge requests target this branch.

tsx

import { Field, NativeSelect } from "@karnstack/dowel";

<Field.Root>
  <Field.Label>Default branch</Field.Label>
  <NativeSelect name="defaultBranch" defaultValue="main">
    <option value="main">main</option>
    <option value="develop">develop</option>
    <option value="release">release</option>
  </NativeSelect>
  <Field.Description>New merge requests target this branch.</Field.Description>
</Field.Root>

Sizes

tsx

<NativeSelect aria-label="Compact provider" size="sm"><option>GitHub</option></NativeSelect>
<NativeSelect aria-label="Default provider"><option>GitHub</option></NativeSelect>
<NativeSelect aria-label="Prominent provider" size="lg"><option>GitHub</option></NativeSelect>

When to use it

Prefer NativeSelect for short, familiar option sets and forms that must remain useful before hydration. Use Select when descriptions, grouping, or styled popup rows materially improve the choice.