Select

The Select component provides a customizable dropdown menu for choosing one option from a list. It supports searchable options, error display, disabled state, embedded style, and integration with React Hook Form.

import { Select } from "tawuniya/components";

👉 View in Storybook

---

Props

Prop	Type	Default	Description
label	string	—	Placeholder text when no option is selected.
options	{ value: string; label: string | ReactNode }[]	—	Array of options to display.
value	string	—	Selected value (controlled).
size	"sm" | "md" | "lg"	"md"	Size of the select button.
searchable	boolean	—	Enable search input inside the dropdown.
searchText	string	—	Placeholder text for the search input.
emptyText	string	—	Message to show when no options match the search.
error	string	—	Error message displayed below the select.
embedded	boolean	false	If true, makes the select background transparent.
disabled	boolean	false	Disables the select input.
className	string	—	Additional Tailwind classes for the select button.
bodyClass	string	—	Additional Tailwind classes for the dropdown content.
wrapperClassName	string	—	Additional Tailwind classes for the wrapper.
onChange	(value: string) => void	—	Callback triggered when an option is selected.
form	{ controller: any; control: any; name: string }	—	React Hook Form integration using Controller.
modal	boolean	true	The modality of the popover. When set to false, users can interact with elements outside the popover, and the popover content does not restrict focus or visibility.
getOptionsLabel	string	—	Key for option label.
getOptionsValue	string	—	Key for option value.
displayValue	boolean	false	If true, displays the selected value instead of the label.

Usage

With Controlled Form

export default function BasicExample() {
  const [value, setValue] = useState<string>("");

  return (
    <Select
      label="Select an option"
      options={[
        { label: "Option 1", value: "1" },
        { label: "Option 2", value: "2" },
      ]}
      value={value}
      onChange={setValue}
    />
  );
}

Searchable Dropdown

<Select
  label="Searchable Select"
  searchable
  options={[
    { label: "Option 1", value: "1" },
    { label: "Option 2", value: "2" },
  ]}
/>

With Error Message

<Select
  label="Select an option"
  options={[
    { label: "Option 1", value: "1" },
    { label: "Option 2", value: "2" },
  ]}
  error="This field is required"
/>

Disabled State

<Select
  label="Disabled"
  options={[
    { label: "Option 1", value: "1" },
    { label: "Option 2", value: "2" },
  ]}
  disabled
/>

Without Portal

<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetContent>
    <Select
      label="Disabled"
      options={[
      { label: "Option 1", value: "1" },
      { label: "Option 2", value: "2" },
      ]}
      withoutPortal
    />
  </SheetContent>
</SheetTrigger>

With React Hook Form

import { useForm, Controller } from "react-hook-form";
import { Select } from "tawuniya/components";

export default function FormExample() {
  const { control, handleSubmit } = useForm({
    defaultValues: { option: "" },
  });

  const onSubmit = (data: any) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Select
        form={{ controller: Controller, control, name: "option" }}
        options={[
          { label: "Option 1", value: "1" },
          { label: "Option 2", value: "2" },
        ]}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

With Custom Keys

<Select
  label="Select an option"
  options={[
    { name: "Option 1", id: "1" },
    { name: "Option 2", id: "2" },
  ]}
  value="2"
  getOptionsLabel="name"
  getOptionsValue="id"
/>

Notes

• Works as a controlled component with value + onChange, or with React Hook Form via the form prop.
• Supports searchable dropdown with dynamic filtering.
• Automatically displays error messages below the select.