- Docs
- components
- TextField
TextField
A text field allows a user to enter a plain text value with a keyboard.
Text fields can be built with <input> or <textarea> and <label> elements, but you must manually ensure that they are semantically connected via ids for accessibility. TextField helps automate this, and handle other accessibility features while allowing for custom styling.
Installation
npx @sly-cli/sly add jolly-ui textfieldComposed Components
A TextField uses the following components, which may also be used standalone or reused in other components.
Label
A label provides context for an element.
Input
An input allows a user to enter a plain text value with a keyboard.
Reusable Wrapper - Example
If you will use a TextField in multiple places in your app, you can wrap all of the pieces into a reusable component. This way, the DOM structure, styling code, and other logic are defined in a single place and reused everywhere to ensure consistency.
The installed file includes a reusable wrapper JollyTextField. This wrapper serves as an excellent starting point for use throughout your codebase.
The JollyTextField component extends the props of React Aria TextField and adds:
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | undefined | undefined | Label for the text field |
description | string | undefined | undefined | Description text for the text field |
errorMessage | string | ((validation: AriaValidationResult) => string) | undefined | undefined | Error message to display or function to generate it |
textArea | boolean | undefined | undefined | If true, renders a textarea instead of an input |
You can copy this wrapper and create variations as needed for different use cases in your application. This approach promotes consistency while still allowing for flexibility in implementation.