---
sidebar_position: 10
---

import Paper from "@site/src/components/paper";
import SelectBox, {
  SelectBoxClearable,
  CustomOptionSelectBox,
  SelectWithForm,
  CustomSelectWithSearch,
} from "@site/src/components/select";

# Select

Listboxes are a great foundation for building custom, accessible select menus for your app, complete with robust support for keyboard navigation..

```tsx
import { Select } from "rizzui";
```

<div className="mb-20 md:mb-28" />

## Default

The default style of **Select** component.

<Paper>
  <SelectBox className="w-full max-w-md" />
</Paper>

```tsx
import { useState } from 'react'
import { Select } from "rizzui";

const options = [
  { label: 'Apple 🍎', value: 'apple' },
  { label: 'Banana 🍌', value: 'banana' },
  { label: 'Cherry 🍒', value: 'cherry' },
  ...
];

export default function App() {
  const [value, setValue] = useState(null);
  return (
    <Select
      label="Select"
      options={options}
      value={value}
      onChange={setValue}
    />
  );
}
```

<div className="mb-20" />

## With Clearable Button

You can clear **Select** value using clearable property.

<Paper>
  <SelectBoxClearable
    clearable
    className="w-full max-w-md"
  />
</Paper>

```tsx
import { useState } from 'react'
import { Select } from "rizzui";

const options = [
  { label: 'Apple 🍎', value: 'apple' },
  { label: 'Banana 🍌', value: 'banana' },
  { label: 'Cherry 🍒', value: 'cherry' },
  ...
];

export default function App() {
  const [value, setValue] = useState(options[0]);
  return (
    <Select
      label="Select"
      options={options}
      value={value}
      onChange={setValue}
      clearable={value !== null}
      onClear={() => setValue(null)}
    />
  );
}
```

<div className="mb-20" />

## With Custom Option

Here is the custom option **Select** example.

<Paper>
  <CustomOptionSelectBox className="w-full max-w-md" />
</Paper>

```tsx
import { useState } from 'react'
import { Select, type SelectOption, Text } from "rizzui";

const options = [
  {
    label: "Wolverine",
    value: "wolverine@rizzui.io",
    avatar: "https://randomuser.me/api/portraits/men/43.jpg",
  },
  {
    label: "MessiJr",
    value: "messijr@rizzui.io",
    avatar: "https://randomuser.me/api/portraits/women/65.jpg",
  },
  ...
];

export default function App() {
  const [value, setValue] = useState(null);
  return (
    <Select
      label={label}
      options={customOptions}
      value={value}
      onChange={setValue}
      displayValue={(value) => renderDisplayValue(value)}
      getOptionDisplayValue={(option) => renderOptionDisplayValue(option)}
    />
  );
}

function renderDisplayValue(value: SelectOption) {
  return (
    <span className="flex items-center gap-2">
      <img
        src={value.avatar}
        alt={value.label}
        className="w-7 h-7 object-cover rounded-full"
      />
      <Text>{value.label}</Text>
    </span>
  )
}

function renderOptionDisplayValue(option: SelectOption) {
  return (
    <div className="flex items-center gap-3">
      <img
        src={option.avatar}
        alt={option.label}
        className="w-9 h-9 object-cover rounded"
      />
      <div>
        <Text fontWeight="medium">{option.label}</Text>
        <Text>{option.value}</Text>
      </div>
    </div>
  )
}
```

<div className="mb-20" />

## With Searchable Options

You can search inside **Select** options.

<Paper>
  <SelectBox
    searchable={true}
    className="w-full max-w-md"
  />
</Paper>

```tsx
import { useState } from 'react';
import { Select } from "rizzui";

const options = [
  { label: 'Apple 🍎', value: 'apple' },
  { label: 'Banana 🍌', value: 'banana' },
  { label: 'Cherry 🍒', value: 'cherry' },
  ...
];

export default function App() {
  const [value, setValue] = useState(null);
  return (
    <Select
      value={value}
      label="Select"
      searchable={true}
      options={options}
      onChange={setValue}
    />
  );
}
```

<div className="mb-20" />

## With React Hook Form and Zod Validation

In this example, we are going to use **React Hook Form** and **Zod** for validation. Open browser console to see the submitted data.

<Paper>
  <SelectWithForm />
</Paper>

```tsx
import { Select, Button } from "rizzui";
import { z } from "zod";
import { Controller, useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";

const schema = z.object({
  select: z.string(),
});

type SchemaType = z.infer<typeof schema>;

export function SelectWithForm() {
  const { handleSubmit, control } = useForm({
    resolver: zodResolver(schema),
  });

  const onSubmit = (data: SchemaType) => {
    console.log("Submitted data", data);
  };

  return (
    <form
      onSubmit={handleSubmit(onSubmit)}
      className="w-full max-w-md"
    >
      <Controller
        name="select"
        control={control}
        render={({ field: { value, onChange }, fieldState: { error } }) => (
          <Select
            label="Select"
            value={value}
            options={options}
            onChange={onChange}
            getOptionValue={(option) => option.value}
            displayValue={(selected) => options?.find((r) => r.value === selected)?.label ?? ""}
            error={error?.message}
            className="w-full max-w-md"
            clearable
            onClear={() => onChange("")}
          />
        )}
      />

      <Button
        type="submit"
        className="mt-4 w-full"
      >
        Submit
      </Button>
    </form>
  );
}
```

<div className="mb-20" />

## API Reference

<hr />

<div className="mb-10" />

### Select Props

Here is the API documentation of the **Select** component.

<div className="overflow-x-auto select-props-row-highlight">

|          Props           |                  Type                   |                                                                                                          Description                                                                                                           |    Default    |
| :----------------------: | :-------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------: |
|         options          | [`SelectOption[]`](#select-option-type) |                                                                                Add options data using this prop. **options** prop is required.                                                                                 |     \_\_      |
|          value           |                   `T`                   |                                                                                        The selected value. **value** prop is required.                                                                                         |     \_\_      |
|         onChange         |          `(value: T) => void`           |                                                                      The function to call when a new option is selected.. **onChange** prop is required.                                                                       |     \_\_      |
|      onSearchChange      |        `(value: string) => void`        |                                                                                    The function to call when type in options search panel.                                                                                     |     \_\_      |
|          label           |               `ReactNode`               |                                                                                                        Set field label                                                                                                         |     \_\_      |
|       labelWeight        |      [LabelWeight](#label-weight)       |                                                                                                     Set label font weight                                                                                                      |  `"medium"`   |
|         variant          |   [SelectVariants](#select-variants)    |                                                                                               The variants of the component are:                                                                                               |  `"outline"`  |
|           size           |      [SelectSizes](#select-sizes)       |                                                                           The size of the component. "sm" is equivalent to the dense select styling.                                                                           |    `"md"`     |
|         rounded          |    [SelectRounded](#select-rounded)     |                                                                                                   The rounded variants are:                                                                                                    |    `"md"`     |
|        autoFocus         |                `boolean`                |                                                                                          Whether select is focused by default or not                                                                                           |   `"false"`   |
|         inPortal         |                `boolean`                |                                                                                    Whether select options is rendered on the portal or not                                                                                     |   `"true"`    |
|   disableDefaultFilter   |                `boolean`                |                                                                                Whether the default filter works or not when search for options                                                                                 |   `"false"`   |
|          modal           |                `boolean`                |                                                                             Whether the body scrollbar is hidden or not when dropdown is visible.                                                                              |   `"false"`   |
|           gap            |                `number`                 |                                                                                  Sets the gap between trigger and dropdown if portal is true                                                                                   |     `"6"`     |
|       placeholder        |                `string`                 |                                                                                                  Set select placeholder text                                                                                                   | `"Select..."` |
|         disabled         |                `boolean`                |                                                                                             Whether the select is disabled or not                                                                                              |     \_\_      |
|        clearable         |                `boolean`                |                                                                                                      Add clearable option                                                                                                      |     \_\_      |
|         onClear          |    [SelectOnClear](#select-onclear)     |                                                                                                          clear event                                                                                                           |     \_\_      |
|          prefix          |               `ReactNode`               |                                           The prefix is design for adding any icon or text on the Select field's start (it's a left icon for the `ltr` and right icon for the `rtl`)                                           |     \_\_      |
|          suffix          |               `ReactNode`               |                                            The suffix is design for adding any icon or text on the Select field's end (it's a right icon for the `ltr` and left icon for the `rtl`)                                            |     \_\_      |
|        helperText        |               `ReactNode`               |                                                                                    Add helper text. It could be string or a React component                                                                                    |     \_\_      |
|          error           |                `string`                 |                                                                                               Show error message using this prop                                                                                               |     \_\_      |
|       displayValue       |               `function`                |                          A function to determine the display value of the selected item. **@param value** - The value of the selected item, **@returns ReactNode** to display for the selected item.                           |     \_\_      |
|  getOptionDisplayValue   |               `function`                | Use this function when you want to display something other than the default displayValue. **@param option** - The SelectOption for which to get the display value, **@returns ReactNode** to display for the specified option. |     \_\_      |
|      getOptionValue      |               `function`                |            Select whether the label or value should be returned in the onChange method. **@param option** - The SelectOption for which to get the value, **@returns** The selected value from the specified option.            |     \_\_      |
|      labelClassName      |                `string`                 |                                                                                              Override default CSS style of label                                                                                               |     \_\_      |
|     selectClassName      |                `string`                 |                                                                                          Override default CSS style of select button                                                                                           |     \_\_      |
|    dropdownClassName     |                `string`                 |                                                                                         Override default CSS style of select dropdown                                                                                          |     \_\_      |
|     optionClassName      |                `string`                 |                                                                                          Override default CSS style of select option                                                                                           |     \_\_      |
|     prefixClassName      |                `string`                 |                                                                                              Override default CSS style of prefix                                                                                              |     \_\_      |
|     suffixClassName      |                `string`                 |                                                                                              Override default CSS style of suffix                                                                                              |     \_\_      |
|     helperClassName      |                `string`                 |                                                                                            Override default CSS style of helperText                                                                                            |     \_\_      |
|      errorClassName      |                `string`                 |                                                                                          Override default CSS style of error message                                                                                           |     \_\_      |
|        className         |                `string`                 |                                                                                        Add custom classes to the root of the component                                                                                         |     \_\_      |
|        searchable        |                `boolean`                |                                                                                              Is select options searchable or not                                                                                               |   `"false"`   |
|       stickySearch       |                `boolean`                |                                                                                                 Is search input sticky or not.                                                                                                 |   `"false"`   |
|    searchPlaceholder     |                `string`                 |                                                                                               Set search input placeholder text                                                                                                | `"Search..."` |
|        searchType        |             `text` `search`             |                                                                                                     Set search input type                                                                                                      |   `"text"`    |
|      searchReadOnly      |                `boolean`                |                                                                                              Set search input is readonly or not                                                                                               |   `"false"`   |
|      searchDisabled      |                `boolean`                |                                                                                              Set search input is disabled or not                                                                                               |   `"false"`   |
|       searchPrefix       |               `ReactNode`               |                                           The prefix is design for adding any icon or text on the Search field's start (it's a left icon for the `ltr` and right icon for the `rtl`)                                           |     \_\_      |
|       searchSuffix       |               `ReactNode`               |                                            The suffix is design for adding any icon or text on the Search field's end (it's a right icon for the `ltr` and left icon for the `rtl`)                                            |     \_\_      |
| searchContainerClassName |                `string`                 |                                                                                           Override default CSS style of search root                                                                                            |     \_\_      |
|  searchPrefixClassName   |                `string`                 |                                                                                          Override default CSS style of search prefix                                                                                           |     \_\_      |
|     searchClassName      |                `string`                 |                                                                                           Override default CSS style of search input                                                                                           |     \_\_      |
|  searchSuffixClassName   |                `string`                 |                                                                                          Override default CSS style of search suffix                                                                                           |     \_\_      |
|       searchByKey        |                `string`                 |                                                                                             Set a custom key to search in options                                                                                              |   `'label'`   |
|       searchProps        |           `HTMLInputElement`            |                                                                                        Set's extra attributes for search input element                                                                                         |     \_\_      |

</div>

<div className="mb-10" />

### Select Option type

```ts
type SelectOption = {
  value: string | number;
  label: string;
  disabled?: boolean;
  [key: string]: any;
};
```

<div className="mb-10" />

### Label Weight

```ts
type LabelWeight = "normal" | "medium" | "semibold" | "bold";
```

<div className="mb-10" />

### Select Variants

```ts
type SelectVariants = "outline" | "flat" | "text";
```

<div className="mb-10" />

### Select Sizes

```ts
type SelectSizes = "sm" | "md" | "lg" | "xl";
```

<div className="mb-10" />

### Select Rounded

```ts
type SelectRounded = "sm" | "md" | "lg" | "none" | "pill";
```

<div className="mb-10" />

### Select onClear

```ts
type InputOnclear = (event) => void;
```
