Dashboard UI Kit

Apps PreviewDownload Design Package

    Table of contents

  1. Basic Usage
  2. Prop Table

TextField

import { TextField } from '@duik/it'
import TextField from '@duik/text-field'

Basic Usage

<TextField defaultValue="Default text" />
ReactHTML Snippet
<TextField label="Label" placeholder="Write Something" />
ReactHTML Snippet
There is a problem
<TextField
  errorMessage="There is a problem"
  label="Label"
  placeholder="Write Something"
/>
ReactHTML Snippet
It's ok!
<TextField
  label="Label"
  placeholder="Write Something"
  successMessage="It's ok!"
/>
ReactHTML Snippet
search_left
<TextField
  label="Label"
  leftEl={<Icon>search_left</Icon>}
  placeholder="Write Something"
/>
ReactHTML Snippet
search_left
<TextField
  label="Label"
  placeholder="Write Something"
  rightEl={<Icon>search_left</Icon>}
/>
ReactHTML Snippet
search_left
<TextField
  disabled
  label="Label"
  placeholder="Write Something"
  rightEl={<Icon>search_left</Icon>}
/>
ReactHTML Snippet
<TextField label="Label" placeholder="Write Something" readOnly />
ReactHTML Snippet
<TextField clear placeholder="Write Something" />
ReactHTML Snippet
search_left
<TextField
  clear
  leftEl={<Icon>search_left</Icon>}
  placeholder="Write Something"
/>
ReactHTML Snippet
search_left
<TextField
  clear
  placeholder="Write Something"
  rightEl={<Icon>search_left</Icon>}
/>
ReactHTML Snippet

Prop table

className

Required: false

type: string
className, e.g. "my-custom-styling"
label

Required: false

type: string
Label text. Ideally you should pass "id" as well, TextField will automatically connect the label with "for"
clear

Required: false

type: boolean
Renders without borders.
errorMessage

Required: false

type: React.ReactNode
Displays error message and renders input in error state.
successMessage

Required: false

type: React.ReactNode
Displays success message and renders input in success state.
leftEl

Required: false

type: React.ReactNode
Displayes content on left side of the input, e.g. icon
rightEl

Required: false

type: React.ReactNode
Displayes content on right side of the input, e.g. icon
wrapperProps

Required: false

type: Props of "div"
Pass down properties to the element that wraps the input and icons.
noWrap

Required: false

type: boolean
When multiple elements are rendered, e.g. providing a label, the component will wrap the content with a FormGroup component for mroe consistent UI. pass noWrap={false} to disable the default behaviour.
...rest

Required: false

type: any
Other properties are passed down to the input element