Select

Presents a list of options for the user to choose from — activated by a button.

Installation

pnpm add @inpulse-ds/select

Usage

This component needs to be in the context of a form to be rendered. Make sure it is applied this way.

import { useForm } from "react-hook-form";
import { Form } from '@inpulse-ds/form';
import { Input } from '@inpulse-ds/select';
 
const methods = useForm();
 
export function Demo() {
  return (
    <Form methods={methods}>
      <Select name="select">
        ...
      </Select>
    </Form>
  );
}

Examples

Default

With disabled items

You can add special styles to disabled items using the disabled attribute.

With dividers

Use SelectSeparator to add an element that will split two items.

With grouped items

Use SelectGroup and SelectLabel to group items in a section.

With scrolling

By default, whenever the list of options exceeds the maximum height allowed, a scroll will be added.

Events

Use the onChange event to perform an action every time the value of the Select is changed.