TextField

TextFields allow users enter and edit text inputs.

Simple TextFields

This is an informative helper text.

With InputAdornments

The InputAdornment can be used to add a prefix, a suffix, an action, or an icon to an input.

Controlled TextField

You can use the value, and onChange properties to control the behaviour of the text field.

The value is
""

API

Learn more about the properties and the customization points.

Usage

import TextField from "@sonnat/ui/TextField";

//or
import { TextField } from "@sonnat/ui";

Properties

Note that the documentation avoids mentioning all the native props (there are a lot) in this section of the components.

TextField Properties
Name	Type	Default	Description
className	string	-	Append to the class names applied to the component so you can override or extend the styles.
name	string	-	The name of the text field.
placeholder	string	-	The `placeholder` property of the text field.
value	string	-	The value of the text field. The DOM API casts this to a string.
defaultValue	string	-	The default value. Use when the component is not controlled.
helperText	string	-	The helper text content.
helperIcon	node	-	The helper icon element placed before the helper text.
size	"large" \| "medium" \| "small"	"medium"	The size of the text field.
variant	"filled" \| "outlined"	"outlined"	The variant of the text field.
type	"text" \| "email" \| "password" \| "number" \| "url"	"text"	The type of the input.
leadingAdornment	node	-	The leading adornment for this component. This can be used to add a prefix, an action, or an icon to the leading of your input.
trailingAdornment	node	-	The trailing adornment for this component. This can be used to add a suffix, an action, or an icon to the trailing of your input.
rounded	boolean	false	If `true`, the text field will be rounded.
disabled	boolean	false	If `true`, the text field will be disabled.
readOnly	boolean	false	If `true`, the text field will be readOnly.
focused	boolean	false	If `true`, the text field will be focused.
autoFocus	boolean	false	If `true`, the text field will be focused on mount.
required	boolean	false	If `true`, the text field will be required.
hasError	boolean	false	If `true`, the text field will indicate invalid input.
fluid	boolean	false	If `true`, the text field will be fluid (max-width: 100%)
inputProps	object	-	The properties applied to the `input` element.
onChange	function	-	The callback fires when the state has changed. Signature: `function(value: string) => void`
The `ref` is forwarded to the root element. Any other properties supplied will be provided to the root element.