Coral is a thoroughly developed design system widely adopted by developers and designers for creating beautiful and user-friendly Sea internal products.
Copyright © 2018-2025 Sea Labs
Blogs
All blogsTextField
Designer doc
TextField component for single-line text input.
Example
Basic Usage
View code
Note that placeholder prop also accepts ReactElements, which is normally not supported using traditional HTML attribute. This allows more flexibility in what you put in the placeholder.
View code
Full width
In order to get 100% width, you can specify fullWidth prop to true.
View code
Disabled state
View code
Invalid state
There are two ways specifying TextField as invalid: (1) Through Field or (2) directly passing invalid prop to TextField. If you specify invalid prop to TextField, it takes higher precedence than the one from enclosing Field‘s.
View code
Addons
You can add something on the left and right side of the TextField. There are also some built-ins addons like TextFieldCharCount and TextFieldClear components.
View code
References
Reading: The Evolution of Material Design’s Text Fields. The redesign includes the finding of text field with semi-transparent fill is more distinguishable, easier to find and read, and more understandable.
API
TextField
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| autoComplete | "on" | "off" | "nope" | off | |
| defaultValue | string | @deprecated use initialValue | |
| disabled | boolean | ||
| fullWidth | boolean | width: 100% is too troublesome to handle with custom css because of the nesting | |
| initialValue | string | ||
| invalid | boolean | ||
| leftElement | ReactNode | ||
| leftElementContainerProps | HTMLAttributes<HTMLDivElement> & { ref?: MutableRefObject<HTMLDivElement>; } | ||
| onChange | (e: ChangeEvent<HTMLInputElement>) => void | ||
| onTextChange | (val: string) => void | ||
| placeholder | ReactNode | ||
| readOnly | boolean | ||
| rightElement | ReactNode | ||
| rightElementContainerProps | HTMLAttributes<HTMLDivElement> & { ref?: MutableRefObject<HTMLDivElement>; } | ||
| type | "number" | "text" | "password" | text | |
| value | string | ||
| wrapperProps | WrapperProps |
TextFieldCharCount
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| outOf | number |
TextFieldClear
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| colorType | ColorTypes | Set color based on theme. If color is specified, that prop is used instead of this. | |
| disabled | boolean | Equivalent to button's disabled property. | |
| keyboardClickKeys | string[] | ||
| loading | boolean | ||
| onBlur | FocusEventHandler<HTMLDivElement> | ||
| onClick | MouseEventHandler<HTMLDivElement> | ||
| onKeyDown | KeyboardEventHandler<HTMLDivElement> | ||
| onKeyUp | KeyboardEventHandler<HTMLDivElement> | ||
| onMouseDown | MouseEventHandler<HTMLDivElement> | ||
| onMouseLeave | MouseEventHandler<HTMLDivElement> | ||
| onMouseUp | MouseEventHandler<HTMLDivElement> | ||
| onRelease | EventHandler<SyntheticEvent<HTMLDivElement, Event>> | Callback that's triggered after click i.e. mouseup and keyup of enter or space. | |
| onTouchEnd | TouchEventHandler<HTMLDivElement> | ||
| onTouchStart | TouchEventHandler<HTMLDivElement> | ||
| radius | string | ||
| size | IconButtonSizes | ||
| tooltip | ReactNode | ||
| tooltipProps | Omit<TooltipProps, "title" | "children"> | ||
| variant | IconButtonVariants | flat |