Use a text field to allow the user to enter a string of text.
Text fields have a label to explain the required information and optional hint text to provide extra context.
Input fields have different styling on web and app.
1. Web
2. App
Usage
Use short, clear label text that doesn’t take up multiple lines.
Text fields should be labelled ‘optional’ where an input isn’t required.
Don't use the text field component when asking the user for a long response that won't fit into the input field. Use the larger, multi-line textarea field instead.
Available platforms
|
Platform |
Available |
|---|---|
|
Figma |
v3+ |
|
Web (@ovotech/element) |
v3.1.0+ |
|
App (@ovotech/element-native) |
v3.1.0+ |
Related components
External links