JollyUI
  1. Docs
  2. components
  3. 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 shadcn@latest add https://jollyui.dev/default/textfield

Composed 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.

Enter your name
Leave a review

The JollyTextField component extends the props of React Aria TextField and adds:

PropTypeDefaultDescription
labelstring | undefinedundefinedLabel for the text field
descriptionstring | undefinedundefinedDescription text for the text field
errorMessagestring | ((validation: AriaValidationResult) => string) | undefinedundefinedError message to display or function to generate it
textAreaboolean | undefinedundefinedIf 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.

Examples

Basic

Validation

Description

Enter an email for us to contact you about your order.

Disabled

Read-only

Multi-line