Text Inputs: Basic single-line text entry fields. Use for names, emails, numbers, and other short text data.

Sizes: Three size options to match your UI density. Default size works for most cases.

Labels: Every form field must have a visible label. Use required/optional indicators to communicate field requirements clearly.

Feedback: Use helper text to provide guidance. Validation states visually indicate success or errors with colored borders and feedback messages.

Select: Dropdown menus for choosing from a list of options. Use when there are more than 5 options or when options are dynamic.

Textarea: Multi-line text input for longer content like descriptions, comments, or messages.

Checkbox: Use for multiple selections where users can choose one or more options, or for boolean toggles like accepting terms.

Radio: Use for single selections where only one option can be chosen from a group.

Toggle: Binary on/off controls for settings and preferences. Use instead of checkboxes when the action takes immediate effect.

Input Groups: Combine inputs with text addons, icons, or buttons for contextual input fields.

Plaintext: Display form values as plain text when in read-only mode while maintaining form layout alignment.

Real-world examples: Typical form layouts and patterns you'll use in your application.