TextField

Examples
TextField
Theme: seekAnz
Theme: seekBusiness
Theme: jobsDbRebrand
Theme: jobsDb
Theme: jobStreet
Theme: jobStreetClassic
Theme: wireframe
Code:
<TextField id="id" label="Job Title" value="Senior Developer" />
TextField with clear button
Theme: seekAnz
Theme: seekBusiness
Theme: jobsDbRebrand
Theme: jobsDb
Theme: jobStreet
Theme: jobStreetClassic
Theme: wireframe
Code:
<TextField
  id="id"
  label="Job Title"
  onClear={function noRefCheck() {}}
  value="Clear me"
/>
TextField with icon
Theme: seekAnz
Theme: seekBusiness
Theme: jobsDbRebrand
Theme: jobsDb
Theme: jobStreet
Theme: jobStreetClassic
Theme: wireframe
Code:
<TextField
  icon={<IconSearch />}
  id="id"
  label="Job Title"
  placeholder="Enter a job title"
  value=""
/>
TextField with message
Theme: seekAnz
e.g. Senior Developer
Theme: seekBusiness
e.g. Senior Developer
Theme: jobsDbRebrand
e.g. Senior Developer
Theme: jobsDb
e.g. Senior Developer
Theme: jobStreet
e.g. Senior Developer
Theme: jobStreetClassic
e.g. Senior Developer
Theme: wireframe
e.g. Senior Developer
Code:
<TextField
  id="id"
  label="Job Title"
  message="e.g. Senior Developer"
  value=""
/>
TextField with secondary label
Theme: seekAnz
Theme: seekBusiness
Theme: jobsDbRebrand
Theme: jobsDb
Theme: jobStreet
Theme: jobStreetClassic
Theme: wireframe
Code:
<TextField id="id" label="Title" secondaryLabel="Optional" value="" />
TextField with tertiary label
Theme: seekAnz
 Help?
Theme: seekBusiness
 Help?
Theme: jobsDbRebrand
 Help?
Theme: jobsDb
 Help?
Theme: jobStreet
 Help?
Theme: jobStreetClassic
 Help?
Theme: wireframe
 Help?
Code:
<TextField
  id="id"
  label="Title"
  secondaryLabel="Optional"
  tertiaryLabel={<TextLink>Help?</TextLink>}
  value=""
/>
TextField with error
Theme: seekAnz
Answer is incorrect
Theme: seekBusiness
Answer is incorrect
Theme: jobsDbRebrand
Answer is incorrect
Theme: jobsDb
Answer is incorrect
Theme: jobStreet
Answer is incorrect
Theme: jobStreetClassic
Answer is incorrect
Theme: wireframe
Answer is incorrect
Code:
<TextField
  id="id"
  label="Do you like Braid?"
  message="Answer is incorrect"
  tone="critical"
  value="No"
/>
TextField with postive message
Theme: seekAnz
Nice one!
Theme: seekBusiness
Nice one!
Theme: jobsDbRebrand
Nice one!
Theme: jobsDb
Nice one!
Theme: jobStreet
Nice one!
Theme: jobStreetClassic
Nice one!
Theme: wireframe
Nice one!
Code:
<TextField
  id="id"
  label="Do you like Braid?"
  message="Nice one!"
  tone="positive"
  value="Yes"
/>
TextField on Brand Background
Theme: seekAnz
Theme: seekBusiness
Theme: jobsDbRebrand
Theme: jobsDb
Theme: jobStreet
Theme: jobStreetClassic
Theme: wireframe
Code:
<Box background="brand" padding="small">
  <TextField id="id" label="Job Title" value="Senior Developer" />
</Box>

Required props

value
string | number | string[]
onChange
(event: FormEvent<HTMLInputElement>) => void
id
string

Optional props

type
"number" | "text" | "tel" | "url" | "email" | "search" | "password"
onBlur
(event: FocusEvent<HTMLInputElement>) => void
onFocus
(event: FocusEvent<HTMLInputElement>) => void
placeholder
string
name
string
tone
"critical" | "positive" | "neutral"
autoComplete
string
disabled
boolean
label
ReactNode
secondaryLabel
ReactNode
tertiaryLabel
ReactNode
description
ReactNode
message
ReactNode
reserveMessageSpace
boolean
aria-describedby
string
data
Record<string, string | number>
onClear
() => void
autoFocus
boolean
icon
ReactNode
required
boolean
ref
(instance: HTMLInputElement | null) => void | RefObject<HTMLInputElement>

Further References