Basic text field without any additional features. Demonstrates the simplest usage of the TextField component.

Text field with a prefix icon. Shows how to add icons or other elements before the input area. The prefix changes color on hover and focus for better user feedback.

Text field with a suffix element. Demonstrates adding badges, buttons, or other elements after the input. Useful for status indicators or action buttons.

Text field with both prefix and suffix elements. Combines prefix icons and suffix badges for rich input experiences. Commonly used for search fields with filters or status indicators.

Text field with a label. Shows proper form labeling for accessibility and usability. Labels help users understand the expected input.

Text field with a description. Provides additional context or help text below the input. Useful for explaining format requirements or providing examples.

Large size variant of the text field. Demonstrates the larger size option for improved visibility. Use for prominent inputs or when more padding is needed.

Disabled text field with label and description. Shows how the component appears when interaction is prevented. All child elements inherit the disabled state automatically.

Read-only text field. Allows viewing but not editing the value. Useful for displaying non-editable information in form contexts.

Variants: Demonstrates different visual variants of the text field component.

- default: Follows the page theme dynamically (light/dark mode) - light: Fixed light appearance regardless of theme - dark: Fixed dark appearance regardless of theme - reset: Removes variant styling, no variant settings applied

Controlled text field with value display. Shows two-way data binding with React state. The current value is displayed below the input for demonstration.

TextField with arrow icon prefix and dropdown menu suffix Demonstrates a URL or page input with navigation and dropdown functionality