FORMS · COMPONENT

Select

A focused choice from a labelled set of options.

@raydenui/ui 0.10.1React + TypeScript

Loading the real component…

"use client";
import { useState } from "react";
import { Select, SelectOption } from "@raydenui/ui";
import "@raydenui/ui/styles.css";

export default function Example({ state = "default" }: { state?: string }) {
  const [role, setRole] = useState("designer");
  return <div style={{ width: "min(100%, 360px)", minHeight: 300 }}>
    <Select label="Your role" value={role} onValueChange={setRole} disabled={state === "disabled"} helperText="Choose the role that fits your day.">
      <SelectOption value="designer">Designer</SelectOption>
      <SelectOption value="developer">Developer</SelectOption>
      <SelectOption value="product">Product manager</SelectOption>
    </Select>
    <p role="status" style={{ marginTop: 24 }}>Selected role: {role}</p>
  </div>;
}

Live library components · illustrative demo data · no remote submissionsReset returns to the initial example.

Made for real interfaces.

A controlled Select with SelectOption children keeps the chosen role in React state. Use the keyboard or pointer to open the list and choose a supported value.

Try it

Choose Developer or Product manager. The selected role updates below the field.

Select

Made for real interfaces.

Try it

A few more possibilities.