Skip to main content

Text Field

Text Field is a form control for entering a single line of text, like naming a project or typing an email address. It pairs the input with a label and can show icons, prefixes, helper text, and error messages.

Import

import { TextField } from '@vortexlabs/vortex';
import type { TextFieldProps } from '@vortexlabs/vortex';

Allied components

Other links

TextField.Root

TextField.Root props
Prop	Type	Default	Attributes
`children`	`React.ReactNode`	No default value
`id`	`string`	No default value
`name`	`string`	No default value
`size`	`union`	`sm`
`error`	`boolean`	No default value
`disabled`	`boolean`	No default value
`focused`	`boolean`	No default value
`required`	`boolean`	No default value
`multiline`	`boolean`	No default value
`variant`	`union`	`outline`
`width`	`union`	No default value
`className`	`union`	No default value
`attributes`	`object`	No default value

TextField.Label

TextField.Label props
Prop	Type	Default	Attributes
`children`	`React.ReactNode`	No default value

TextField.Input

TextField.Input props
Prop	Type	Default	Attributes
`name`	`string`	No default value
`placeholder`	`string`	No default value
`onChange`	`callback`	No default value
`onFocus`	`callback`	No default value
`onBlur`	`callback`	No default value
`className`	`union`	No default value
`style`	`object`	No default value
`attributes`	`object`	No default value
`value`	`string`	No default value
`defaultValue`	`string`	No default value
`startIcon`	`union`	No default value
`prefix`	`React.ReactNode`	No default value
`startSlot`	`React.ReactNode`	No default value
`slotMarginStart`	`number`	No default value
`endIcon`	`union`	No default value
`suffix`	`React.ReactNode`	No default value
`endSlot`	`React.ReactNode`	No default value
`slotMarginEnd`	`number`	No default value
`ref`	`ref`	No default value

TextField.ErrorMessage

TextField.ErrorMessage props
Prop	Type	Default	Attributes
`children`	`React.ReactNode`	No default value

TextField.HelperText

TextField.HelperText props
Prop	Type	Default	Attributes
`children`	`React.ReactNode`	No default value