Select

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

import { Select } from "rizzui";

Default

The default style of Select component.

Select

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}
    />
  );
}

With Clearable Button

You can clear Select value using clearable property.

Select

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)}
    />
  );
}

With Custom Option

Here is the custom option Select example.

Select

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>
  )
}

With Searchable Options

You can search inside Select options.

Select

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}
    />
  );
}

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.

Select

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>
  );
}

API Reference

---

Select Props

Here is the API documentation of the Select component.

Props	Type	Description	Default
options	SelectOption[]	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.	__
label	ReactNode	Set field label	__
labelWeight	LabelWeight	Set label font weight	"medium"
variant	SelectVariants	The variants of the component are:	"outline"
size	SelectSizes	The size of the component. "sm" is equivalent to the dense select styling.	"md"
rounded	SelectRounded	The rounded variants are:	"md"
inPortal	boolean	Whether select options is rendered on the portal or not	"true"
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	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"
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	__

Select Option type

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

Label Weight

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

Select Variants

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

Select Sizes

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

Select Rounded

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

Select onClear

type InputOnclear = (event) => void;