Text Field
TextField allow users to enter text into the UI, Typically appear in forms.
Idle
Hover
Focused
Pressed
Disabled
Basic usage
import { TextField } from '@streamelements/frontend-ui';
export function MyTextField() {
return <TextField.Single label="Label" />
}
Components
TextField
The TextField Root component is a complete form control including a label and an input.
<TextField.Single label="Sample"/>
Adornment
The TextField.Adornment component exposes the ability to decorate a text field at the beginning and/or at the end of the input. There may be at most one per side (start and end). In case two are passed on, the one further down the list is picked.
KG
<TextField.Single label="Weight" type="number" defaultValue={83}>
<TextField.Adornment>KG</TextField.Adornment>
</TextField.Single>
HelperText
The TextField.HelperText component exposes the ability to add an explanatory text below an input. In case two or more are passed on, the one further down the list is picked.
<TextField.Single label="Weight" defaultValue={83}>
<TextField.Adornment>KG</TextField.Adornment>
<TextField.HelperText>Raw muscle mass</TextField.HelperText>
</TextField.Single>
CharLimitIndicator
The TextField.CharLimitIndicator component exposes the ability to show an a character limit.
<TextField.Single label="Nickname" defaultValue="darkoe" maxLength={10}>
<TextField.CharLimitIndicator />
</TextField.Single>
Props
Root
For DX sake, the following props are passed straight down to the Input element:
- type
- placeholder
- onChange
For additional prop-passing to the input element, check out the inputProps prop. With that said, the following props are available:
Name | Type | Default value | Description |
label | string | – | The label of the field |
value | string | number | readonly string[] | – | The controlled state of component. Must be used in conjunction with onValueChange |
defaultValue | string | number | readonly string[] | – | The initial state of the field |
onValueChange | Function | – | Callback function to be called when the state changes (value: string | number) => void |
disabled | boolean | – | When true, prevents user interaction with the component. |
error | boolean | – | When true, the field turns red. And if no Adornment with position="end" is passed on, an error icon is shown. |
required | boolean | – | When true, the user must check input a value. |
name | string | – | The name of the input element. Submitted with its parent form. |
maxLength | number | Infinity | Sets a limit on the length of the value |
inputProps | HTMLProps | {} | Props to pass on to the input/textarea element |
css | CSS | {} | Pass on additional styling utilizing Stitches' tokens |
Adornment
Name | Type | Default value | Description |
position | start | end | end | The horizontal position of the adornment |
children | React.Children | – | Components to render inside the adornment |
css | CSS | {} | Pass on additional styling utilizing Stitches' tokens |
HelperText
The HelperText component is based on Text.Body with caption and some additional styling.
CharLimitIndicator
Name | Type | Default value | Description |
css | CSS | {} | Pass on additional styling utilizing Stitches' tokens |
Examples
Multiline
Basic
<TextField.Multi label="Weight">
<TextField.HelperText>Press enter for a new line
</TextField.HelperText>
</TextField.Multi>
Char limited
<TextField.Multi
label="Weight"
maxLength={120}
defaultValue="Lorem ipsum dolor sit amet consectetur adipisicing elit."
>
<TextField.HelperText>Press enter for a new line
</TextField.HelperText>
<TextField.CharLimitIndicator />
</TextField.Multi>
Minimum height
<TextField.Multi
label="Weight"
maxLength={120}
defaultValue="Lorem ipsum dolor sit amet consectetur adipisicing elit."
inputProps={{
rows: 3, // Can't be less than this
// or via css
css: {
minHeight: 80
}
}}
/>