Devup UI - Select

Select

Select

Select component allows users to choose from a list of options.

Examples

Default Compound component with trigger and dropdown. Use SelectTrigger to create the button, SelectContainer for the dropdown, and SelectOption for each option.

Show Code

1import {
2    Select,
3    SelectContainer,
4    SelectOption,
5    SelectTrigger,
6} from '@devup-ui/components'
7
8export default function Default() {
9    return (
10        <Select>
11            <SelectTrigger>Select an option</SelectTrigger>
12            <SelectContainer>
13                <SelectOption value="option1">Option 1</SelectOption>
14                <SelectOption value="option2">Option 2</SelectOption>
15                <SelectOption value="option3">Option 3</SelectOption>
16            </SelectContainer>
17        </Select>
18    )
19}
20

1import {
2    Select,
3    SelectContainer,
4    SelectOption,
5    SelectTrigger,
6} from '@devup-ui/components'
7
8export default function Default() {
9    return (
10        <Select>
11            <SelectTrigger>Select an option</SelectTrigger>
12            <SelectContainer>
13                <SelectOption value="option1">Option 1</SelectOption>
14                <SelectOption value="option2">Option 2</SelectOption>
15                <SelectOption value="option3">Option 3</SelectOption>
16            </SelectContainer>
17        </Select>
18    )
19}
20

Radio Type Use type="radio" for single selection mode. The selected option is highlighted with a check icon, and the dropdown closes after selection.

Show Code

1'use client'
2
3import {
4    Select,
5    SelectContainer,
6    SelectOption,
7    SelectTrigger,
8} from '@devup-ui/components'
9import { useState } from 'react'
10
11export default function Radio() {
12    const [value, setValue] = useState('')
13
14    return (
15        <Select onChange={setValue} type="radio" value={value}>
16            <SelectTrigger>{value || 'Select an option'}</SelectTrigger>
17            <SelectContainer>
18                <SelectOption value="option1">Option 1</SelectOption>
19                <SelectOption value="option2">Option 2</SelectOption>
20                <SelectOption value="option3">Option 3</SelectOption>
21            </SelectContainer>
22        </Select>
23    )
24}
25

1'use client'
2
3import {
4    Select,
5    SelectContainer,
6    SelectOption,
7    SelectTrigger,
8} from '@devup-ui/components'
9import { useState } from 'react'
10
11export default function Radio() {
12    const [value, setValue] = useState('')
13
14    return (
15        <Select onChange={setValue} type="radio" value={value}>
16            <SelectTrigger>{value || 'Select an option'}</SelectTrigger>
17            <SelectContainer>
18                <SelectOption value="option1">Option 1</SelectOption>
19                <SelectOption value="option2">Option 2</SelectOption>
20                <SelectOption value="option3">Option 3</SelectOption>
21            </SelectContainer>
22        </Select>
23    )
24}
25

Checkbox Type Use type="checkbox" for multiple selection mode. Users can select multiple options, and use showConfirmButton on the container to add a confirm button.

Show Code

1'use client'
2
3import {
4    Select,
5    SelectContainer,
6    SelectOption,
7    SelectTrigger,
8} from '@devup-ui/components'
9import { useState } from 'react'
10
11export default function Checkbox() {
12    const [value, setValue] = useState<string[]>([])
13
14    const handleChange = (nextValue: string) => {
15        if (value.includes(nextValue)) {
16            setValue(value.filter((v) => v !== nextValue))
17        } else {
18            setValue([...value, nextValue])
19        }
20    }
21
22    return (
23        <Select onChange={handleChange} type="checkbox" value={value}>
24            <SelectTrigger>
25                {value.length > 0 ? value.join(', ') : 'Select options'}
26            </SelectTrigger>
27            <SelectContainer showConfirmButton>
28                <SelectOption value="option1">Option 1</SelectOption>
29                <SelectOption value="option2">Option 2</SelectOption>
30                <SelectOption value="option3">Option 3</SelectOption>
31            </SelectContainer>
32        </Select>
33    )
34}
35

1'use client'
2
3import {
4    Select,
5    SelectContainer,
6    SelectOption,
7    SelectTrigger,
8} from '@devup-ui/components'
9import { useState } from 'react'
10
11export default function Checkbox() {
12    const [value, setValue] = useState<string[]>([])
13
14    const handleChange = (nextValue: string) => {
15        if (value.includes(nextValue)) {
16            setValue(value.filter((v) => v !== nextValue))
17        } else {
18            setValue([...value, nextValue])
19        }
20    }
21
22    return (
23        <Select onChange={handleChange} type="checkbox" value={value}>
24            <SelectTrigger>
25                {value.length > 0 ? value.join(', ') : 'Select options'}
26            </SelectTrigger>
27            <SelectContainer showConfirmButton>
28                <SelectOption value="option1">Option 1</SelectOption>
29                <SelectOption value="option2">Option 2</SelectOption>
30                <SelectOption value="option3">Option 3</SelectOption>
31            </SelectContainer>
32        </Select>
33    )
34}
35

Options Use the options prop as a shorthand to define options without compound components. Each option can have label, value, disabled, and onClick properties.

Show Code

1import { Select } from '@devup-ui/components'
2
3export default function WithOptions() {
4    return (
5        <Select
6            options={[
7                { label: 'Option 1', value: 'option1' },
8                { label: 'Option 2', value: 'option2' },
9                { label: 'Option 3', value: 'option3', disabled: true },
10            ]}
11        >
12            Select with options prop
13        </Select>
14    )
15}
16

1import { Select } from '@devup-ui/components'
2
3export default function WithOptions() {
4    return (
5        <Select
6            options={[
7                { label: 'Option 1', value: 'option1' },
8                { label: 'Option 2', value: 'option2' },
9                { label: 'Option 3', value: 'option3', disabled: true },
10            ]}
11        >
12            Select with options prop
13        </Select>
14    )
15}
16

API

The Select component is a compound component that consists of multiple parts.

Select

The root component that provides context for the select.

Prop	description	Type	Default
children	The select content (Trigger, Container, Options)	`React.ReactNode`
value	The controlled value of the select	`string \| string[]`	`undefined`
defaultValue	The default value of the select (uncontrolled)	`string \| string[]`	`undefined`
onChange	Callback when the selected value changes	`(value: string) => void`	`undefined`
open	Whether the select dropdown is open (controlled)	`boolean`	`undefined`
defaultOpen	Whether the select dropdown is open by default	`boolean`	`false`
onOpenChange	Callback when the open state changes	`(open: boolean) => void`	`undefined`
type	The selection mode of the select	`'default' \| 'radio' \| 'checkbox'`	`'default'`
typography	Typography style key from the theme	`DevupThemeTypographyKeys`	`undefined`
options	Shorthand for defining options without using compound components	`{ label?: string; disabled?: boolean; value: string; showCheck?: boolean; onClick?: (value, e) => void }[]`	`undefined`
colors	Custom color variables for the select	`{ primary?: string border?: string inputBackground?: string inputDisabledBackground?: string inputDisabledText?: string base10?: string title?: string selectDisabled?: string primaryBg?: string }`	`undefined`

SelectTrigger

The button that triggers the dropdown to open/close.

Prop	description	Type	Default
children	The trigger content	`React.ReactNode`
asChild	Render as the child element instead of a Button	`boolean`	`false`

SelectContainer

The dropdown container that holds the options.

Prop	description	Type	Default
children	The container content (Options)	`React.ReactNode`
showConfirmButton	Whether to show a confirm button (for checkbox type)	`boolean`	`false`
confirmButtonText	Text for the confirm button	`string`	`'D�'`
x	Horizontal offset for the dropdown position	`number`	`0`
y	Vertical offset for the dropdown position	`number`	`0`

SelectOption

An individual option within the select dropdown.

Prop	description	Type	Default
children	The option content	`React.ReactNode`
value	The value of the option	`string`	`undefined`
disabled	Whether the option is disabled	`boolean`	`false`
showCheck	Whether to show a check icon when selected	`boolean`	`true`
onClick	Custom click handler for the option	`(value: string \| undefined, e?: React.MouseEvent) => void`	`undefined`

SelectDivider

A visual divider between options.