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

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 requried.	__
value	T	The selected value. value prop is requried.	__
onChange	(value: T) => void	The function to call when a new option is selected.. onChange prop is requried.	__
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"
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	__

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;