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.
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.
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.
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;