Pikas UI

@pikas-ui/select

This package contains a select component that can be used to select an option from a list of options.

This library is based on Radix Ui.

Change Log

Requirements

To use this package, you must install the @pikas-ui/styles package.

Installation

You can install this package using npm, yarn, or pnpm.

npm install @pikas-ui/select

yarn add @pikas-ui/select

pnpm add @pikas-ui/select

Usage

Select

This component is used to select an option from a list of options.

import { Select } from '@pikas-ui/select';

const Example: React.FC = () => {
  return (
    <Select
      defaultValue="option-1-1"
      data={[
        {
          name: 'Option 1',
          items: [
            {
              label: 'Option 1.1',
              value: 'option-1-1',
            },
            {
              label: 'Option 1.2',
              value: 'option-1-2',
            },
          ],
        },
        {
          name: 'Option 2',
          items: [
            {
              label: 'Option 2.1',
              value: 'option-2-1',
            },
            {
              label: 'Option 2.2',
              value: 'option-2-2',
            },
          ],
        },
      ]}
    />
  );
};

Props

Prop	Description	Type	Default
`description`	The description of the select.	`string`	-
`css`	Custom css for the component.	`SelectCSS`	-
`label`	The label of the select.	`string` or `ReactNode`	-
`id`	The id of the select.	`string`	-
`value`	The value of the select.	`string`	-
`hasSearch`	If the select has a search.	`boolean`	`false`
`searchPlaceholder`	The placeholder of the search.	`string`	-
`onChange`	The callback when the select changes.	`(value: string) => void`	-
`onOpenChange`	The callback when the select opens or closes.	`(open: boolean) => void`	-
`defaultOpen`	If the select is open by default.	`boolean`	`false`
`direction`	The direction of the select.	`SelectDirections`	-
`textError`	The error of the select.	`string`	-
`ariaLabel`	The aria-label of the select.	`string`	-
`outline`	If the select has an outline.	`boolean`	`true`
`backgroundColorName`	The background color of the select.	`string`	-
`boxShadow`	The box shadow of the select.	`string`	-
`borderRadius`	The border radius of the select.	`string`	-
`borderColorName`	The border color of the select.	`string`	-
`borderWidth`	The border width of the select.	`number`	-
`fontSize`	The font size of the select.	`string`	-
`padding`	The padding of the select.	`SelectPadding`	-
`data`	The data of the select.	`SelectData`	-
`width`	The width of the select.	`string or number`	`"100%"`
`maxWidth`	The max width of the select.	`string or number`	`"100%"`
`minWidth`	The min width of the select.	`string or number`	-
`required`	The required of the select.	`boolean`	`false`
`info`	Add a info icon with a tooltip.	`string`	-
`disabled`	If the select is disabled.	`boolean`	`false`
`placeholder`	The placeholder of the select.	`string`	-

Reference

You can use the ref prop to get the select reference.

import type { SelectRef } from '@pikas-ui/select';
import { Select } from '@pikas-ui/select';
import { useRef } from 'react';
import { Button } from '@pikas-ui/button';

const Example: React.FC = () => {
  const selectRef = useRef<SelectRef>(null);

  return (
    <>
      <Select
        ref={selectRef}
        defaultValue="option-1"
        data={[
          {
            items: [
              {
                label: 'Option 1',
                value: 'option-1',
              },
              {
                label: 'Option 2',
                value: 'option-2',
              },
            ],
          },
        ]}
      />
      <Button
        onClick={(): void => {
          selectRef.current?.setValue('option-1');
        }}
      >
        Set Option 1
      </Button>
      <Button
        onClick={(): void => {
          selectRef.current?.setValue('option-2');
        }}
      >
        Set Option 2
      </Button>
    </>
  );
};

Ref	Description	Type	Default
`setValue`	Set the value of the select.	`(value: string) => void`	-

Contributing

This documentation can be edited on GitHub here