Textfield component

Textfield

The Textfield component provides a versatile input solution for capturing user data. It supports various input types, validation states, and enhanced features like character counting and clearable functionality. Designed with accessibility and user experience in mind.

Examples of textfield

Base

A simple text input field with default styling and behavior. This is the most basic form of the textfield component, suitable for general text input needs.

Type

Demonstrates different input types (text, email, password, number, etc.) to handle specific data formats and enable appropriate virtual keyboards on mobile devices.

Variant

Shows visual variants of the textfield: outlined, filled, or underlined to match different design systems and UI contexts.

Clearable

Adds a clear button that allows users to quickly empty the input field. Particularly useful for search fields and forms where users need to reset values frequently.

Counter

Displays a character counter to help users stay within specified limits. Shows current length and maximum allowed characters, with visual feedback when approaching or exceeding limits.

Size

Controls the overall size of the textfield (small, medium, large) to fit different layout requirements and visual hierarchies.

Density

Adjusts vertical spacing and padding (compact, comfortable, default) to optimize space usage in dense interfaces or provide more breathing room.

Message

Shows how to display helpful messages below the input field. Useful for providing instructions, hints, or additional context to users.

Error

Demonstrates error states and validation feedback. Shows how the textfield appears when validation fails and how to display error messages to guide users.

Snippet

Illustrates the use of snippets to add custom content like icons, buttons, or decorative elements before or after the input field.

Form

Shows the textfield in a complete form context with labels, validation, and proper form integration. Demonstrates real-world usage patterns.

API Reference

Variables CSS

Textfield works great with Form validation and can be enhanced with Icons and Buttons using snippets.

---