Select

Primary role

Choose the role closest to your work.

"use client";

import { BriefcaseBusiness, Code2, Palette } from "lucide-react";
import { useState } from "react";

import { Select, type SelectOption } from "@/components/matos-ui/select";

const roles: SelectOption[] = [
  {
    value: "design",
    label: "Product Designer",
    icon: <Palette className="size-4" />,
  },
  {
    value: "engineering",
    label: "Frontend Engineer",
    icon: <Code2 className="size-4" />,
  },
  {
    value: "lead",
    label: "Product Lead",
    icon: <BriefcaseBusiness className="size-4" />,
  },
];

export function SelectDemo() {
  const [role, setRole] = useState<string | null>(null);

  return (
    <div className="mx-auto w-full max-w-sm">
      <Select
        label="Primary role"
        options={roles}
        placeholder="Choose your role"
        value={role}
        onValueChange={(nextValue) => setRole(nextValue)}
        description="Choose the role closest to your work."
      />
    </div>
  );
}

Installation

pnpm dlx shadcn@latest add https://matos-ui.com/r/select.json

Usage

import { Select } from "@/components/matos-ui/select"

<Select
  label="Role"
  options={[
    { value: "design", label: "Design", description: "Product and systems" },
    { value: "engineering", label: "Engineering" },
  ]}
  value={role}
  onValueChange={setRole}
  error={errors.role?.message}
/>

Select behaves like a compact command menu: opening it focuses a search field inside the popup, where users can filter options, navigate matches with the keyboard, and select with Enter. It supports option icons and descriptions, disabled, direct integration with a React Hook Form Controller, an emptyMessage, and custom searchText for options whose labels are not plain strings.