Select

Dropdown selection with native select element.

Examples

Default

With Label

Framework

Disabled

With Groups

Invalid

Select with error state.

This field is required.

Installation

pnpm add @rokle/components @rokle/tokens

Installs with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.

Usage

import { Select } from "@rokle/components";

import { Select } from "@rokle/components";

export function Example() {
  return (
    <div className="max-w-xs">
      <Select>
        <option value="">Select a brand system...</option>
        <option value="meridian">Meridian</option>
        <option value="volta">Volta</option>
        <option value="serac">Serac</option>
        <option value="obsidian">Obsidian</option>
        <option value="bloom">Bloom</option>
      </Select>
    </div>
  );
}

Source

The implementation source for this component. Copy it into your project and customise.

API Reference

Prop	Type	Default	Description
children	ReactNode	-	Option elements.
disabled	boolean	false	Disable interaction.

Previous← SegmentGroup NextSlider →