Select

The RhSelect is a component for creating dropdown menus. And used to create searchable and customizable dropdown menus where users can select one or more options from a list of available options. And this component is highly customizable and can be used for various types of dropdown menus and with different data sources.

Usage

Once installed, you can import the RhSelect component into your React application:

copy
import {RhSelect} from "@rhythm-ui/react"

Then, you can use the RhSelect component in your JSX code:

Select...
copy
<div className="h-[200px] w-full flex justify-center">
  <div className="h-full w-80 p-4">
    <RhSelect
      onChange={() => {}}
      className="text-sm"
      options={[
        { label: "Blues", value: "blues" },
        { label: "Rock", value: "rock" },
        { label: "Jazz", value: "jazz" },
      ]}
    />
  </div>
</div>

Select Props

classNamestringSets a className attribute on the outer component
inputSize"sm" | "lg" | "md"Handle select input size
errorbooleanMake this true if there is an error (handy for validation such as formik)
namestringName of the HTML Input (optional - without this, no input will be rendered)
placeholderReactNodePlaceholder for the select value
aria-errormessagestringHTML ID of an element containing an error message related to the input*
aria-invalidboolean | "false" | "true" | "grammar" | "spelling"Indicate if the value entered in the field is invalid *
aria-labelstringAria label (for assistive tech)
aria-labelledbystringHTML ID of an element that should be used as the label (for assistive tech)
aria-live"off" | "assertive" | "polite"Used to set the priority with which screen reader should treat updates to live regions. The possible settings are: off, polite (default) or assertive

Group Options

The options prop accepts an array of objects, where each object represents a group of options in the dropdown menu. The options in the dropdown menu can be organized into logical categories or sections, which can help users navigate and find the options they need more easily.

Select...
copy
<div className="h-[200px] w-full flex justify-center">
  <div className="h-full w-80 p-4">
    <RhSelect
      onChange={() => {}}
      className="text-sm"
      options={[
        {
          label: "Group 1",
          options: [{ label: "Group one option A", value: "value1" }],
        },
        {
          label: "Group 2",
          options: [{ label: "Group two option B", value: "value2" }],
        },
      ]}
    />
  </div>
</div>

Multi Select

The isMulti prop is used to specify whether to select multiple options or not. If isMulti is set to true, the user can select multiple options by clicking on them, and the selected options will be displayed as separate tags in the input field. If isMulti is set to false or omitted, the user can only select one option at a time.

Select...
copy
<div className="h-[200px] w-full flex justify-center">
  <div className="h-full w-80 p-4">
    <RhSelect
      isMulti
      onChange={() => {}}
      className="text-sm"
      options={[
        { label: "Blues", value: "blues" },
        { label: "Rock", value: "rock" },
        { label: "Jazz", value: "jazz" },
      ]}
    />
  </div>
</div>

Default Value

The defaultValue prop is used to specify the options when the component is first rendered. It works similarly to the value prop, but it is only used to set the initial value, and it does not update the selected value in response to user interactions.

Rock
copy
<div className="h-[200px] w-full flex justify-center">
  <div className="h-full w-80 p-4">
    <RhSelect
      defaultValue={{ label: "Rock", value: "rock" }}
      className="text-sm"
      onChange={() => {}}
      options={[
        { label: "Blues", value: "blues" },
        { label: "Rock", value: "rock" },
        { label: "Jazz", value: "jazz" },
      ]}
    />
  </div>
</div>

Auto Focus

The autoFocus prop is used to specify whether a component should automatically focus on the input field when it is mounted. If autoFocus is set to true, the input field will be focused automatically, allowing the user to begin typing right away. If it is set to false or omitted, the input field will not be automatically focused.

option , selected. Select is focused ,type to refine list, press Down to open the menu,
Select...
copy
<div className="h-[200px] w-full flex justify-center">
  <div className="h-full w-80 p-4">
    <RhSelect
      autoFocus
      onChange={() => {}}
      className="text-sm"
      options={[
        { label: "Blues", value: "blues" },
        { label: "Rock", value: "rock" },
        { label: "Jazz", value: "jazz" },
      ]}
    />
  </div>
</div>

Clearable

The isClearable prop is used to specify whether the component should display a clear button that allows the user to clear the currently selected option or options.

Select...
copy
<div className="h-[200px] w-full flex justify-center">
  <div className="h-full w-80 p-4">
    <RhSelect
      isClearable
      onChange={() => {}}
      className="text-sm"
      options={[
        { label: "Blues", value: "blues" },
        { label: "Rock", value: "rock" },
        { label: "Jazz", value: "jazz" },
      ]}
    />
  </div>
</div>

Backspace Removes Value

The backspaceRemovesValue prop is used to specify whether the component should remove the last selected option when the user presses the backspace key.

Select...
copy
<div className="h-[200px] w-full flex justify-center">
  <div className="h-full w-80 p-4">
    <RhSelect
      backspaceRemovesValue
      isMulti
      className="text-sm"
      onChange={() => {}}
      options={[
        { label: "Blues", value: "blues" },
        { label: "Rock", value: "rock" },
        { label: "Jazz", value: "jazz" },
      ]}
    />
  </div>
</div>

Hide Selected Options

The hideSelectedOptions prop is used to specify whether the component should hide the selected options from the dropdown menu or not.

Select...
copy
<div className="h-[200px] w-full flex justify-center">
  <div className="h-full w-80 p-4">
    <RhSelect
      hideSelectedOptions
      className="text-sm"
      onChange={() => {}}
      options={[
        { label: "Blues", value: "blues" },
        { label: "Rock", value: "rock" },
        { label: "Jazz", value: "jazz" },
      ]}
    />
  </div>
</div>

Disabled

The isDisabled prop is used to specify whether the component should be disabled or not.

Select...
copy
<div className="h-[200px] w-full flex justify-center">
  <div className="h-full w-80 p-4">
    <RhSelect
      isDisabled
      className="textsm"
      onChange={() => {}}
      options={[
        { label: "Blues", value: "blues" },
        { label: "Rock", value: "rock" },
        { label: "Jazz", value: "jazz" },
      ]}
    />
  </div>
</div>

Select Style Checkbox

The selectStyle prop is a configuration option that allows you to customize the appearance of the component. This prop accepts three possible values: checkbox, tick, and radio. Depending on the value you choose for this prop, the appearance of the RhSelect component options will vary.

Select...
copy
<div className="h-[200px] w-full flex justify-center">
  <div className="h-full w-80 p-4">
    <RhSelect
      isMulti
      className="text-sm"
      onChange={() => {}}
      options={[
        { label: "Blues", value: "blues" },
        { label: "Rock", value: "rock" },
        { label: "Jazz", value: "jazz" },
      ]}
      selectStyle="checkbox"
      hideSelectedOptions={false}
    />
  </div>
</div>

Select Style Tick

If you set selectStyle to tick, the component will appear as a group of checkboxes with a tick mark inside them. This is similar to the checkbox style, but the tick mark provides a visual indicator to the user that the option has been selected.

Select...
copy
<div className="h-[200px] w-full flex justify-center">
  <div className="h-full w-80 p-4">
    <RhSelect
      isMulti
      onChange={() => {}}
      className="text-sm"
      options={[
        { label: "Blues", value: "blues" },
        { label: "Rock", value: "rock" },
        { label: "Jazz", value: "jazz" },
      ]}
      selectStyle="tick"
      hideSelectedOptions={false}
    />
  </div>
</div>

Select Style Radio

If you set selectStyle to radio, the component will appear as a group of radio buttons. Each option will be represented by a radio button that the user can select.

Select...
copy
<div className="h-[200px] w-full flex justify-center">
  <div className="h-full w-80 p-4">
    <RhSelect
      isMulti
      className="text-sm"
      onChange={() => {}}
      options={[
        { label: "Blues", value: "blues" },
        { label: "Rock", value: "rock" },
        { label: "Jazz", value: "jazz" },
      ]}
      selectStyle="radio"
      hideSelectedOptions={false}
    />
  </div>
</div>

Custom Options

The customOption prop is a configuration option that allows you to define a custom rendering function for the options in the component. When set, this prop overrides the default rendering behavior of the options and allows you to create a custom user interface for each option.

Select...
copy
function CustomOptions() {
  const CustomOptionComp = ({ label }) => (
    <div className="flex gap-4">
      <RhIcon
        icon={`emojione:flag-for-${label.toLowerCase()}`}
        className="text-2xl"
      />
      {label}
    </div>
  );
  return (
    <div className="h-[200px] w-full flex justify-center">
      <div className="h-full w-80 p-4">
        <RhSelect
          className="text-sm"
          onChange={() => {}}
          options={[
            { label: "Canada", value: "Canada" },
            { label: "India", value: "India" },
            { label: "China", value: "China" },
          ]}
          customOption={CustomOptionComp}
          creatable
        />
      </div>
    </div>
  );
}