TextField

A text input with a label, help text and a validation message. Set multiline for a text area that grows with its content.

Title

TextField.tsx

import {TextField} from 'alinea/components'

export function TextFieldExample() {
  return (
    <TextField
      label="Title"
      defaultValue="Summer collection"
      style={{width: 280}}
    />
  )
}

States

description tells editors what to enter, error shows a validation message instead and marks the input as invalid. Required fields show a marker next to their label, read-only fields can still be selected and copied.

Slug

Used in the page URL

Title *

A title is required

Author

Entry id

TextFieldStates.tsx

import {TextField} from 'alinea/components'

export function TextFieldStatesExample() {
  return (
    <div style={{display: 'grid', gap: 16, width: 280}}>
      <TextField
        label="Slug"
        description="Used in the page URL"
        defaultValue="linen-shirt"
      />
      <TextField label="Title" required error="A title is required" />
      <TextField label="Author" defaultValue="Anna Peeters" disabled />
      <TextField label="Entry id" defaultValue="2mXhVzR4" readOnly />
    </div>
  )
}

Multiline

A multiline field starts at rows lines and grows as editors type, up to maxRows lines when you set it, then it scrolls.

Description

TextFieldMultiline.tsx

import {TextField} from 'alinea/components'

export function TextFieldMultilineExample() {
  return (
    <TextField
      label="Description"
      multiline
      rows={4}
      maxRows={8}
      defaultValue="A relaxed shirt in washed linen that softens with every wear."
      style={{width: 300}}
    />
  )
}

Icons

startIcon and endIcon render inside the input, before and after the text.

Website

TextFieldIcons.tsx

import {TextField} from 'alinea/components'
import {
  IcRoundLink,
  IcRoundOpenInNew,
  IcRoundSearch
} from 'alinea/dashboard/icons'

export function TextFieldIconsExample() {
  return (
    <div style={{display: 'grid', gap: 16, width: 280}}>
      <TextField
        aria-label="Search products"
        placeholder="Search products"
        startIcon={IcRoundSearch}
      />
      <TextField
        label="Website"
        type="url"
        defaultValue="https://oakandloom.com"
        startIcon={IcRoundLink}
        endIcon={IcRoundOpenInNew}
      />
    </div>
  )
}

Native input attributes

type, name, autoComplete, inputMode, pattern, minLength and maxLength are passed to the input. inputMode picks the virtual keyboard on touch devices, eg. numeric for a code, and pattern is a regular expression the value must match, checked when the field is in a Form.

Props

PropTypeDefaultDescription

valuestringDefault –

defaultValuestringDefault –

onValueChange(value: string) => voidDefault –

placeholderstringDefault –

multilinebooleanDefault –Render a textarea that grows with its content

rowsnumberDefault 1Minimum number of rows of a multiline field

maxRowsnumberDefault –Maximum number of rows a multiline field grows to before it scrolls

startIconIconType | ReactElementDefault –Icon displayed inside the input, before the text

endIconIconType | ReactElementDefault –Icon displayed inside the input, after the text

namestringDefault –

autoFocusbooleanDefault –

autoCompletestringDefault –

maxLengthnumberDefault –

minLengthnumberDefault –

patternstringDefault –A regular expression the value must match to be valid

onBlur(event: FocusEvent<TextFieldElement>) => voidDefault –

onFocus(event: FocusEvent<TextFieldElement>) => voidDefault –

onKeyDown(event: KeyboardEvent<TextFieldElement>) => voidDefault –

inputPropsDataPropsDefault –Extra data attributes for the input element

refRef<HTMLDivElement>Default –

labelReactNodeDefault –

descriptionReactNodeDefault –

errorReactNodeDefault –

requiredbooleanDefault –

disabledbooleanDefault –

readOnlybooleanDefault –

iconIconType | ReactElementDefault –

sharedbooleanDefault –Marks the field as shared between translations

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.

Accessibility

The label, description and error are linked to the input, so screen readers announce them together. An error sets aria-invalid on the input.