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

TextField 

import { TextField } from "@dapper-ui/core";
The TextField component is a versatile input field that allows users to enter text, numbers, and passwords. It can be customized in size and color.

Demo

Color 
1
2
3
<TextField label="Example">
    <Bulb slot="icon-label"/>
</TextField>

Variants

Download more icon variants from https://tabler-icons.io/i/user
Something is wrong!
Need Help?

Props

TextField

id

Type
string
Default Value
Autogenerated random ID

name

Type
string | undefined
Default Value
undefined

placeholder

Type
string | undefined
Default Value
undefined

type

Type
'text' | 'password' | 'number'
Default Value
'text'

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

readonly

Type
boolean
Default Value
false

value

Type
string | number
Default Value
Empty string

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.

min

Type
number | undefined
Default Value
undefined

For number type

max

Type
number | undefined
Default Value
undefined

For number type

step

Type
number | undefined
Default Value
undefined

For number type

transform

Type
???
Default Value
(v) => v

For number type

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.