TextInput component · Kition Tessera

Playground

Props

size

placeholder

invalid

disabled

What is shown

import { TextInput } from '@kition/tessera-ui'

<TextInput size="md" placeholder="Layer name" />

Examples

Sizes and invalid

text-input.tsx

import { TextInput } from '@kition/tessera-ui'
import { SearchIcon } from '@kition/tessera-icons/react'

export default function Demo() {
  return (
    <div className="demo-stack">
      <TextInput placeholder="sm: kit toolbars (28)" />
      <TextInput size="md" placeholder="md: panels and settings (36)" />
      <TextInput size="lg" placeholder="lg: forms and dialogs (44)" />
      <TextInput size="md" defaultValue="not-an-email" invalid />
      <TextInput size="md" type="search" aria-label="Search users" placeholder="Search users" prefix={<SearchIcon size={16} />} />
    </div>
  )
}

Props

TextInput

A single-line text field. invalid marks it (and aria-invalid) after a failed check.

Prop	Type	Default	Description
`size`	`ControlSize`	`'sm'`
`invalid`	`boolean`	—
`prefix`	`ReactNode`	—	An icon (or short text) inside the field before the text: a search glass, a person.
`wrapperClassName`	`string`	—	Classes for the box around the field and its prefix (layout: width, margins).

Also takes the attributes of its HTML element (`className`, `aria-*`, events…).

Used in

1 of Kition's 16 kits use this component.

Table