import { Links } from 'src/storybook'; import { Primary, Canvas, Controls } from '@storybook/addon-docs/blocks'; import * as ComponentStories from 'src/molecules/TextField/TextField.stories';
Re-styled component from EDS
Lets users enter, interact and edit content, typically in forms and dialogs.
TextField should be discoverable, clear and efficient.
- Text fields should stand out and point that users can input information.
- Text field states should be **clearly** distinguish from one another.
- Text fields should make it easy to understand the required information and to address any errors.
{' '}
import { TextField } from '@equinor/amplify-component-lib';
<TextField />;- **Label text** informs users as to what information is requested for a text field. Every text field should have a label.
- **Helper text** gives additional guidance about the input field, such as how it will be used. It should only take up a single line.
Examples of common used types (input type).
Note: While type="number" does provide native validation, the implementation is inconsistent across browsers. We instead recommend using custom validation like the examples provided here.
Changes TextField to show loading state and disables inputting
Changes the input to textarea for multiline support.
Note that a multiline with fixed height overwrites the rows property. rowsMax overwrites fixed height,
so it is not recommended to use those together.
Units are used for single line text field.
Textfield can be used with the native type prop which allows the usage of "date"/"time"/"datetime-local" to create accessible date/timepickers.
Note that icon should not be used here, as browser implement this input in different ways and some, such as Chrome, add their own icons inside the input.
Examples of validation states. You can add the icon in the helper text or inside the text input, both not in both places.
Compact TextField uses EdsProvider
Here is one way to do it using pattern and onChange