Dapper UI
Download more icon variants from https://tabler-icons.io/i/brand-github View on GitHub
Download more icon variants from https://tabler-icons.io/i/notebook Getting Started
Quick Start (tl;dr)
Installation
Usage
Download more icon variants from https://tabler-icons.io/i/components Components
Button
TextField
Slider
Select
Checkbox
Text
Dialog
Modal
ProgressBar
Meter
Download more icon variants from https://tabler-icons.io/i/bulb Concepts
Theming
Colors
Icons
Styling
Dark Mode
Download more icon variants from https://tabler-icons.io/i/notebook Getting Started
Quick Start (tl;dr)
Installation
Usage
Download more icon variants from https://tabler-icons.io/i/components Components
Button
TextField
Slider
Select
Checkbox
Text
Dialog
Modal
ProgressBar
Meter
Download more icon variants from https://tabler-icons.io/i/bulb Concepts
Theming
Colors
Icons
Styling
Dark Mode

Select

import { Select } from "@dapper-ui/core";
The Select component allows users to choose from a list of options.

Demo

Color
1
2
3
4
5
<Select label="Favorite Fruit">
    <option value="apple">Apple</option>
    <option value="banana">Bananna</option>
    <option value="orange">Orange</option>
</Select>

Props

Select

id

Type
string
Default Value
Autogenerated random ID

helpText

Type
string | undefined
Default Value
undefined

error

Type
string | undefined
Default Value
undefined

disabled

Type
boolean
Default Value
false

required

Type
boolean
Default Value
false

value

Type
string | never | undefined
Default Value
undefined

label

Type
string
Default Value
None

hideLabel

Type
boolean
Default Value
false

autoFocus

Type
boolean
Default Value
false

When set to true, automatically focuses the element when the component is mounted.

This is useful for usability and accessibility reasons, for example to focus an element when a modal is opened.

color

Type
string | undefined
Default Value
undefined

When set to true, automatically focuses the element when the component is mounted.

This is useful for usability and accessibility reasons, for example to focus an element when a modal is opened.

size

Type
'sm' | 'base' | undefined
Default Value
'base'

When set to true, automatically focuses the element when the component is mounted.

This is useful for usability and accessibility reasons, for example to focus an element when a modal is opened.

radius

Type
Radius | undefined
Default Value
undefined

When set to true, automatically focuses the element when the component is mounted.

This is useful for usability and accessibility reasons, for example to focus an element when a modal is opened.

fullWidth

Type
boolean
Default Value
false

When set to true, automatically focuses the element when the component is mounted.

This is useful for usability and accessibility reasons, for example to focus an element when a modal is opened.

classLabel

Type
string
Default Value
Empty string

Additional CSS classes to add to the label.

style

Type
string | undefined
Default Value
undefined

Custom CSS styles to apply.

Especially useful for positioning styles like margings.