TextField

The TextField component is a versatile and styled input field. It offers features like theming, validation, error handling, and the capability to prepend or append icons.

Usage

Basic TextField

Simple TextField example

<TextField placeholder="Name" />

Variants

Using the ghost, solid, outlined variant prop.

<Flex direction="column">
  <TextField block placeholder="Address" variant="ghost" />
  <TextField block placeholder="Address" variant="solid" />
  <TextField block placeholder="Address" variant="outlined" />
</Flex>

Shadow

Using the shadow prop we can adjust shadow values for the component.

<Flex direction="column">
  <TextField shadow="4" placeholder="Name" />
</Flex>

TextField with Icons

TextField with prepend and append icons

<TextField placeholder="Search" iconPrepend={<Icon type="Search" />} iconAppend={<Icon type="X" />} />

Error Handling

With custom error messages

<TextField placeholder="Email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" errorMessage="Enter a valid email address." />

Theming and Styling

Themed TextField

<TextField placeholder="Password" color="blue" radius="full" />

API

Props

Prop	Type	Default	Required
variant	'solid' | 'ghost' | 'outlined'	-	-
placeholder	string	-	-
iconPrepend	ReactNode	-	-
iconAppend	ReactNode	-	-
block	boolean	-	-
pattern	string	-	-
errorMessage	string	-	-
onChange	(e: ChangeEvent<HTMLInputElement>) => void	-	-
onSubmit	() => void	-	-
color	ThemeAccentColor	-	-
size	'xlarge' | 'large' | 'medium' | 'small'	'medium'	-
radius	ThemeRadius	-	-
highContrast	boolean	-	-
shadow	ThemeShadow	-	-