Select

Select is a React component that provides a customizable select input field with support for various options, including label, variant, color, helper text, and error handling. It allows you to create a dropdown menu with a list of selectable options.

Example Preview

Select Example

Usage

import { Select } from "@/path/to/Select";
 
// Use Select in your component
<Select
  className="custom-style primary-color lg"
  label="Choose an option"
  variant="outlined"
  helperText="Please select an option"
  disabled={false}
  error={false}
  size="md"
  color="ghost"
  selected=""
  options={[
    { label: "Option 1", value: "option1" },
    { label: "Option 2", value: "option2" },
    // ... more options
  ]}
  // Additional HTML attributes can be passed as well
  onChange={(e) => console.log(e.target.value)}
/>;

Props

Prop name	Type	Default value	Required	Description
`className`	string	-	No	Additional CSS classes for styling.
`label`	string	-	No	Label for the select input field.
`variant`	`outlined`, `filled`, `standard`	`standard`	No	Select field variant.
`helperText`	string	-	No	Helper text displayed below the select input field.
`disabled`	boolean	`false`	No	Disables the select input field.
`error`	boolean	`false`	No	Indicates whether there's an error with the select input.
`size`	`xs`, `sm`, `md`, `lg`	`md`	No	Size of the select input field.
`color`	`primary`, `secondary`, `error`, `success`, `warning`, `info`, `accent`, `ghost`	`primary`	No	Color of the select input field.
`selected`	string	-	No	The selected value in the dropdown.
`options`	`{ label: string, value: string, selected?: boolean, disabled?: boolean }[]`	-	Yes	An array of objects representing selectable options. Each object should have `value`, `label`, `selected` (optional), and `disabled` (optional) properties.
`props`	HTMLAttributes<HTMLSelectElement>	-	No	Additional HTML attributes can be passed as well.

Additionally, it accepts all HTML select attributes (HTMLAttributes<HTMLSelectElement>).

Styling

Similar to CustomInputField, the Select component allows for extensive styling customization through the use of various classes based on the specified options. These classes can be passed through the className prop.

For example:

<Select
  className="custom-style primary-color lg"
  // other props...
/>

In the above example, the select input field will have the styles defined by the 'custom-style', 'primary-color', and 'lg' classes. Refer to the source code for a detailed list of available classes.

ℹ️

Note: The InputField component is inspired by the DaisyUI (opens in a new tab) framework. Check it out for more awesome components. But our InputField component is dynamic and easy to use. It is also fully customizable.

Ratings Text Field