Component

Native Select

A native <select> with the input look and a chevron: the platform picker on mobile, type-to-select, form submission and change events for free. Use Select when you need a custom listbox.

Basic

Options are ordinary <option> elements; every native attribute passes through.

Status

Selected: open

Sizes

sm, default and lg match the Input sizes.

Installation

$pnpm add @refraction-ui/react

Usage

tsx

import { NativeSelect } from '@refraction-ui/react'

export function StatusFilter({ value, onChange }) {
  return (
    <NativeSelect aria-label="Status" value={value} onChange={(e) => onChange(e.target.value)}>
      <option value="all">All</option>
      <option value="open">Open</option>
      <option value="closed">Closed</option>
    </NativeSelect>
  )
}

Props

Prop	Type	Default	Description
`size`	`'sm' \| 'default' \| 'lg'`	`'default'`	Visual size (shadows the native size attribute).
`containerClassName`	`string`	--	Classes for the positioning wrapper (width, margins).
`className`	`string`	--	Classes for the <select>.
`…select attributes`	`SelectHTMLAttributes`	--	value, defaultValue, onChange, name, disabled, required, aria-* — all passed to the <select>, which also receives the ref.