Get Started

Components

accordion alert avatar breadcrumb button checkbox dropdown input label modal pagination radio select sheet skeleton switch table textarea toast

Select

A dropdown selection interface element that allows users to choose one option from a given set.

code

Expend code


    <Select
      options={[
        { label: 'select 1', value: '1' },
        { label: 'select 2', value: '2' },
        { label: 'select 3', value: '3' }
      ]}
      onSelect={(value) => {value}}
    />


    <Select
      options={[
        { label: 'select 1', value: '1' },
        { label: 'select 2', value: '2' },
        { label: 'select 3', value: '3' }
      ]}
      onSelect={(value) => {value}}
    />

#DefaultSelected

code

Expend code


    <Select
      options={[
        { label: 'select 1', value: '1' },
        { label: 'select 2', value: '2' },
        { label: 'select 3', value: '3' }
      ]}
      onSelect={(value) => {value}}
      defaultSelected="2"
    />


    <Select
      options={[
        { label: 'select 1', value: '1' },
        { label: 'select 2', value: '2' },
        { label: 'select 3', value: '3' }
      ]}
      onSelect={(value) => {value}}
      defaultSelected="2"
    />

#Description

code

Expend code


    <Select
      options={[
        { label: 'Viewer', value: 'viewer', description: 'Can view and comment.' },
        { label: 'Developer', value: 'developer', description: 'Can view, comment and edit.' },
        { label: 'Billing', value: 'billing', description: 'Can view, comment and manage billing.' },
        { label: 'Owner', value: 'owner', description: 'Admin-level access to all resources.' },
        { label: 'Member', value: 'member', description: 'Team member' }
      ]}
      onSelect={(value) => {value}}
    />


    <Select
      options={[
        { label: 'Viewer', value: 'viewer', description: 'Can view and comment.' },
        { label: 'Developer', value: 'developer', description: 'Can view, comment and edit.' },
        { label: 'Billing', value: 'billing', description: 'Can view, comment and manage billing.' },
        { label: 'Owner', value: 'owner', description: 'Admin-level access to all resources.' },
        { label: 'Member', value: 'member', description: 'Team member' }
      ]}
      onSelect={(value) => {value}}
    />

#Hidden

code

Expend code


    <Select
      options={[
        { label: 'Columns', value: 'columns', hidden: true },
        { label: 'Status', value: 'status' },
        { label: 'Email', value: 'email' },
        { label: 'Amount', value: 'amount' },
      ]}
      onSelect={(value) => {value}}
      defaultSelected="columns"
    />


    <Select
      options={[
        { label: 'Columns', value: 'columns', hidden: true },
        { label: 'Status', value: 'status' },
        { label: 'Email', value: 'email' },
        { label: 'Amount', value: 'amount' },
      ]}
      onSelect={(value) => {value}}
      defaultSelected="columns"
    />

#Disabled

code

Expend code


    <Select
      options={[
        { label: 'First Option', value: 'first' },
        { label: 'Second Option', value: 'second' },
        { label: 'Disabled Option', value: 'disable',
          description:"You can't click it, but you can set it as the default selected option.", disabled: true},
        { label: 'Final Option', value: 'final' },
      ]}
      onSelect={(value) => {value}}
      defaultSelected="disable"
    />


    <Select
      options={[
        { label: 'First Option', value: 'first' },
        { label: 'Second Option', value: 'second' },
        { label: 'Disabled Option', value: 'disable',
          description:"You can't click it, but you can set it as the default selected option.", disabled: true},
        { label: 'Final Option', value: 'final' },
      ]}
      onSelect={(value) => {value}}
      defaultSelected="disable"
    />

Select

The properties of the Select component.

Prop	Type	Default	Description
className	string	undefined	Specifies additional CSS classes for the Select component.
options	{ label: string, value: string, description?: string, hidden?: boolean }[]	[]	The list of options to display in the dropdown. Each option can include a label, value, an optional description for additional details, and an optional hidden flag to exclude the option from the dropdown.
onSelect	(value: string) => void	undefined	Callback function called when the selected value changes.
defaultSelected	string	Value of the first non-hidden option	Sets the value of the option that is selected by default when the component is first rendered.
description	string	undefined	Optional description for the option, which is displayed under the label.
hidden	boolean	false	If true, the option will not be displayed in the dropdown.
disabled	boolean	false	If true, the option will be displayed but cannot be selected. But you can set it as the default selected option.