Select

Bundle size WAI-ARIA

Select UI is a user interface element that allows users to choose from a predefined list of options. It typically appears as a dropdown menu, presenting a list of items from which the user can select a single option. This component is useful for scenarios where there are multiple choices, and users need to make a selection from the available options.

Example

"use client";

import React from "react";
import * as Select from "@lora-ui/select";

export default function Base() {
  const [open, setOpen] = React.useState(false);

  function onValueChange(value) {
    console.log(value);
  }

  function onOpenChange(open) {
    setOpen(open);
  }
  return (
    <Select.Root
      onValueChange={onValueChange}
      defaultValue="Blue"
      open={open}
      onOpenChange={onOpenChange}
    >
      <Select.Trigger
        chevronIcon={
          <svg
            width="15"
            height="15"
            viewBox="0 0 15 15"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z"
              fill="currentColor"
              fillRule="evenodd"
              clipRule="evenodd"
            />
          </svg>
        }
        className="border-box z-10 mx-auto flex w-[300px] items-center justify-between whitespace-nowrap rounded-lg border border-[#eaecf0] px-[14px] py-[10px] text-base font-medium text-[#101828] hover:bg-[#f9fafb] disabled:pointer-events-none disabled:bg-[#f9fafb] group-focus:bg-[#f9fafb] dark:border-[#1f242f] dark:text-[#f5f5f6] dark:hover:bg-[#1f242f] dark:disabled:bg-[#1f242f] dark:group-focus:bg-[#1f242f]"
      />
      <Select.Content className="border-box w-[300px] rounded-lg border border-[#eaecf0] bg-[#ffffff] py-1 shadow dark:border-[#1f242f] dark:bg-[#0c111d]">
        <Select.Option
          value="Blue"
          isDisabled
          className="group block w-full px-[6px] py-[1px] focus:outline-none"
        >
          <div className="flex items-center justify-between rounded-md py-[10px] pl-2 pr-[10px] text-base font-medium text-[#101828] hover:bg-[#f2f4f7] disabled:pointer-events-none group-focus:bg-[#f9fafb] group-disabled:bg-[#f9fafb] group-disabled:text-[#667085] dark:text-[#f5f5f6] dark:hover:bg-[#1f242f] dark:group-focus:bg-[#1f242f] dark:group-disabled:bg-[#1f242f] dark:group-disabled:text-[#85888e] [&>svg]:group-aria-[selected=false]:hidden">
            Blue
            <svg
              width="15"
              height="15"
              viewBox="0 0 15 15"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
                fill="currentColor"
                fillRule="evenodd"
                clipRule="evenodd"
              />
            </svg>
          </div>
        </Select.Option>
        <Select.Option
          value="Red"
          className="group block w-full px-[6px] py-[1px] focus:outline-none"
        >
          <div className="flex items-center justify-between rounded-md py-[10px] pl-2 pr-[10px] text-base font-medium text-[#101828] hover:bg-[#f9fafb] group-focus:bg-[#f9fafb] dark:text-[#f5f5f6] dark:hover:bg-[#1f242f] dark:group-focus:bg-[#1f242f] [&>svg]:group-aria-[selected=false]:hidden">
            Red
            <svg
              width="15"
              height="15"
              viewBox="0 0 15 15"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
                fill="currentColor"
                fillRule="evenodd"
                clipRule="evenodd"
              />
            </svg>
          </div>
        </Select.Option>
        <Select.Option
          value="Green"
          className="group block w-full px-[6px] py-[1px] focus:outline-none"
        >
          <div className="flex items-center justify-between rounded-md py-[10px] pl-2 pr-[10px] text-base font-medium text-[#101828] hover:bg-[#f9fafb] group-focus:bg-[#f9fafb] dark:text-[#f5f5f6] dark:hover:bg-[#1f242f] dark:group-focus:bg-[#1f242f] [&>svg]:group-aria-[selected=false]:hidden">
            Green
            <svg
              width="15"
              height="15"
              viewBox="0 0 15 15"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
                fill="currentColor"
                fillRule="evenodd"
                clipRule="evenodd"
              />
            </svg>
          </div>
        </Select.Option>
        <Select.Option
          value="Yellow"
          className="group block w-full px-[6px] py-[1px] focus:outline-none"
        >
          <div className="flex items-center justify-between rounded-md py-[10px] pl-2 pr-[10px] text-base font-medium text-[#101828] hover:bg-[#f9fafb] group-focus:bg-[#f9fafb] dark:text-[#f5f5f6] dark:hover:bg-[#1f242f] dark:group-focus:bg-[#1f242f] [&>svg]:group-aria-[selected=false]:hidden">
            Yellow
            <svg
              width="15"
              height="15"
              viewBox="0 0 15 15"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
                fill="currentColor"
                fillRule="evenodd"
                clipRule="evenodd"
              />
            </svg>
          </div>
        </Select.Option>
        <Select.Option
          value="Purple"
          className="group block w-full px-[6px] py-[1px] focus:outline-none"
        >
          <div className="flex items-center justify-between rounded-md py-[10px] pl-2 pr-[10px] text-base font-medium text-[#101828] hover:bg-[#f9fafb] group-focus:bg-[#f9fafb] dark:text-[#f5f5f6] dark:hover:bg-[#1f242f] dark:group-focus:bg-[#1f242f] [&>svg]:group-aria-[selected=false]:hidden">
            Purple
            <svg
              width="15"
              height="15"
              viewBox="0 0 15 15"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
                fill="currentColor"
                fillRule="evenodd"
                clipRule="evenodd"
              />
            </svg>
          </div>
        </Select.Option>
      </Select.Content>
    </Select.Root>
  );
}

Installation

Install the component from your command line.

npm install @lora-ui/select

API Reference

Root

Prop	Type	Default	Explanation
onValueSelect	Function	(value) => {}
offsetY	Number	6	Panel offset
duration	Number	0
defaultValue	String

Trigger

Prop	Type	Default	Explanation
isDisabled	Boolean	false
chevronIcon	React.ReactNode

Content

Prop	Type	Default	Explanation

Option

Prop	Type	Default	Explanation
value	String		Typeahead value
isDisabled	Boolean	false

Keyboard

Command	Description
Space	Activates the focused item.
Enter	Activates the focused item.
Escape	Closes the popup if the popup is visible
ArrowDown	If popup is closed, open the popup and move focus to the first option, if already select one option, move focus to that option. If popup is open, move focus to next option.
ArrowUp	If popup is closed, open the popup and move focus to the last option, if already select one option, move focus to that option. If popup is open, move focus to previous option.
Home	Moves focus to the first option.
End	Moves focus to the last option.
A-Z and a-z	Focus a option that starts with the typed characters in current listbox when popup is open.

Other

All relevant ARIA attributes are automatically managed.