Input Field
```js
initialState = { value: '', error: null };
onInputChange = (e) => {
if (e.target.value.length > 5) {
setState({
value: e.target.value.substring(0, 5),
error: 'Validation message here'
});
} else {
setState({
value: e.target.value,
error: null
});
}
}
{state.value.length} / 5}
description='Text longer than 5 character will trigger error'
onChange={onInputChange}
/>
```
```js noeditor
initialState = { value: "Input Field text", error: "Validation message here" };
{}}
/>
;
```
Inline Input Field
```js
initialState = { value: '', error: null };
onInputChange = (e) => {
if (e.target.value.length > 5) {
setState({
value: e.target.value.substring(0, 5),
error: 'Validation message here'
});
} else {
setState({
value: e.target.value,
error: null
});
}
}
```
```js noeditor
initialState = { value: "Input Field text", error: "Validation message here" };
{}}
/>
;
```
Input Field Disabled
```js
{}}
/>
```
```js noeditor
{}}
/>
```
Although the component’s default value for type is set to ```text```, the component inherits the value after a native HTML element, hence other types like ```number``` or ```password``` are also available.
Best practices
- Labels:
Form labels should be short, set in sentence case, without punctuation or articles.
- Default values:
Whenever possible, pre-fill inputs with default options to reduce errors and save time.
- Placeholder text:
Only use where clarification is needed. Don’t use a placeholder text as a label.
- Validation text:
Use visuals (border + validation) to help users spot correct errors. Validate inputs as soon as the user clicks away from the input. Once the user corrects the error, the validation should disappear.
The validation text should inform the user what has happened, and what to do next. Use passive voice to avoid blaming users for the error (‘Email required’ insetead of ‘You didn’t enter the email’).
- Optional vs. required fields:
All fields in a form are assumed required, only mark optional fields.