Skip to content
Yuzur1ha Open

Component referenceDraft

Select

Select uses Radix to provide a labelled choice list with keyboard interaction and focus restoration.

Updated

Design notes

Pointer highlighting and keyboard focus are separate states. Text appearance stays borderless when open, and options do not scale on press.

Select owns its trigger label, value and icon. It does not support asChild or custom trigger children. Use onValueChange for selection; native trigger onChange is not a selection callback.

Design sourceOpen in Figma

Select design

Inspect the original component, variants and visual details.

Playground

Playgrounddemo.tsx
private

content/components/select/demo.tsx

import { useState } from "react"
import { Select } from "@yuzur1ha/ui"
import { DemoResult } from "../../examples/result"

export function SelectDemo() {
  const [value, setValue] = useState("private")
  return (
    <>
      <Select
        label="Profile visibility"
        value={value}
        onValueChange={setValue}
        options={[
          { value: "private", label: "Private" },
          { value: "public", label: "Public" },
          { value: "disabled", label: "Disabled", disabled: true },
        ]}
      />
      <div className="demo-row">
        {(["small", "medium", "large"] as const).map((size) => (
          <Select
            key={size}
            size={size}
            label={`${size} selection`}
            defaultValue="one"
            options={[
              { value: "one", label: "First" },
              { value: "two", label: "Second" },
            ]}
          />
        ))}
      </div>
      <Select
        label="Text appearance"
        appearance="text"
        size="small"
        defaultValue="one"
        options={[
          { value: "one", label: "First" },
          { value: "two", label: "Second" },
        ]}
      />
      <DemoResult>{value}</DemoResult>
    </>
  )
}

API

Select

A labelled Radix select with owned trigger content. Native trigger attributes and ref apply to its button; asChild and custom children are not supported. Selection changes use onValueChange.

SelectProps
PropertyTypeRequiredDefaultDescription
labelstringYes—Visible label and accessible name.
hintstringNo—Supporting field guidance, associated with the control.
errorstringNo—Error message. Replaces hint text and marks the field invalid.
optionsreadonly SelectOption[]Yes—Ordered options with unique non-empty values, labels and optional disabled states.
sizeComponentSizeNo"medium"Visual size: small, medium or large.
appearance"text" | "field"No"field"Bordered field treatment or borderless text trigger.
font"body" | "mono"No"body"Font role shared by the trigger and portalled options.
hideLabelbooleanNofalseVisually hide the label while preserving its accessible association.
valuestringNo—Controlled selected option value; an empty string clears selection.
defaultValuestringNo—Initial selected option value when uncontrolled.
onValueChange((value: string) => void)No—Called with the selected option value.
placeholderstringNo—Text shown when the control has no value.
disabledbooleanNo—Disables the native control.
requiredbooleanNo—Require a selection for the owning native form.
namestringNo—Name of the hidden native form control used to submit the selection.
formstringNo—ID of the form receiving the hidden native selection control.
onKeyDownKeyboardEventHandler<HTMLButtonElement>No—Native key handler. Prevent default to skip built-in keyboard behavior.
onPointerDownPointerEventHandler<HTMLButtonElement>No—Native pointer-down handler. Prevent default to skip built-in pointer behavior.
aria-invalidboolean | "true" | "false" | "grammar" | "spelling"No—Marks the native control invalid for assistive technology.
aria-describedbystringNo—IDs of additional descriptive elements; field components merge these with their hint or error ID.
classNamestringNo""Additional classes applied to the component’s documented root or control.
idstringNo—Native control ID. Generated when omitted; the visible label and supporting text use this association.
refRef<HTMLButtonElement>No—Ref to the component’s documented DOM element.

No custom imperative methods. Event callbacks are listed as properties.