TextField is an input field that users can type into.
Functionality
Rough notes:
Emphasize using the native <input> element.
Cover different states (hover, active, focus, disabled, read-only)
Field label, caption, error
Best practices
Rough notes:
Using <label> along with <input>
Using icons with TextField
Marking a field as optional or required
Field validation feedback
How to use field label or placeholder (maybe some copywriting tips)
Cover naming (a la. Input vs TextField)
Implementation
Cover using <input type="text" /> for numeric inputs
Examples
If possible, provide links to a few implementations of this component.
### Accessibility
- Mention relevant accessibility attributes when used with an Autocomplete component.
### Resources
- [Why the GOV.UK Design System team changed the input type for numbers](https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/)
- [W3 - Labeling Controls](https://www.w3.org/WAI/tutorials/forms/labels/)
### Visuals
Any relevant visuals that help describe the component.
### Additional context
Anything that does not fit into the other categories.
raunofreiberg
commented
3 years ago
TextField
TextField is an input field that users can type into.
Functionality
Rough notes:
<input>element.Best practices
Rough notes:
<label>along with<input>Implementation
<input type="text" />for numeric inputsExamples
If possible, provide links to a few implementations of this component. ### Accessibility - Mention relevant accessibility attributes when used with an Autocomplete component. ### Resources - [Why the GOV.UK Design System team changed the input type for numbers](https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/) - [W3 - Labeling Controls](https://www.w3.org/WAI/tutorials/forms/labels/) ### Visuals Any relevant visuals that help describe the component. ### Additional context Anything that does not fit into the other categories.