Inputs
Components and patterns for form inputs, text fields, and data entry elements.
Components & Patterns
Input
| Component | Framework | Sizes | Usage |
|---|---|---|---|
| Input | Tailwind | lg, md, sm | --- |
| Expression editor | React | md | --- |
| Field select | React | lg, md, sm | --- |
| Single select | React | lg, md, sm | --- |
| Multi select | React | lg, md, sm | --- |
| Regex input | React | lg, md, sm | --- |
Forms are used to enter information.
General guidelines
- Label fields as ‘optional’ rather than ‘required’. Users tend to assume everything is required, and usually most things are, so mark the exceptions. Add ‘(optional)’ to the field label to do this.
- Labels should be over fields, not to the left, unless there is a vertical space constraint like in modals.
- Keep text inputs to a sensible width.
max-w-proseis a good default. - When possible, validate input and show success as well as error. Do this when the user is using the fields to give immediate feedback.
Lists
Tokens
The following table shows the design tokens and CSS variables used by the fun-input utility classes:
Text Input Tokens
| Token Name | CSS Variable | Used In | Description |
|---|---|---|---|
input/corner | --f-input-sizes-corner | fun-input | Border radius for input fields |
input/default-txt | --f-input-colors-default-text | fun-input | Default text color |
input/placeholder-txt | --f-input-colors-placeholder-text | fun-input:placeholder-shown | Placeholder text color |
input/default-bg | --f-input-colors-default-background | fun-input | Default background color |
input/default-bd | --f-input-colors-default-border | fun-input | Default border color |
input/hover-bd | --f-input-colors-hover-border | fun-input:hover | Border color on hover |
input/active-bd | --f-input-colors-active-border | fun-input:focus-visible | Border color for focused state |
input/sm-padding | --f-input-sizes-sm-padding | fun-input-sm | Horizontal padding for small inputs |
input/sm-height | --f-input-sizes-sm-height | fun-input-sm | Height for small inputs |
input/sm-gap | --f-input-sizes-sm-gap | fun-input-sm | Gap spacing for small inputs |
input/md-padding | --f-input-sizes-md-padding | fun-input-md | Horizontal padding for medium inputs |
input/md-height | --f-input-sizes-md-height | fun-input-md | Height for medium inputs |
input/md-gap | --f-input-sizes-md-gap | fun-input-md | Gap spacing for medium inputs |
input/lg-padding | --f-input-sizes-lg-padding | fun-input-lg | Horizontal padding for large inputs |
input/lg-height | --f-input-sizes-lg-height | fun-input-lg | Height for large inputs |
input/lg-gap | --f-input-sizes-lg-gap | fun-input-lg | Gap spacing for large inputs |
input/error-bd | --f-input-colors-error-border | fun-input-validated:user-invalid | Border color for error state |
input/error-txt | --f-input-colors-error-text | fun-input-validated:user-invalid | Text color for error state |
input/success-bd | --f-input-colors-success-border | fun-input-validated:user-valid | Border color for success state |
input/success-txt | --f-input-colors-success-text | fun-input-validated:user-valid | Text color for success state |
Selection Input Tokens (Checkbox & Radio)
| Token Name | CSS Variable | Used In | Description |
|---|---|---|---|
selection/default-bg | --f-selection-colors-default-background | fun-input[type='checkbox'], fun-input[type='radio'] | Default background color |
selection/default-bd | --f-selection-colors-default-border | fun-input[type='checkbox'], fun-input[type='radio'] | Default border color |
selection/hover-bd | --f-selection-colors-hover-border | fun-input[type='checkbox']:hover, fun-input[type='radio']:hover | Border color on hover |
selection/selected-bg | --f-selection-colors-selected-background | fun-input[type='checkbox']:indeterminate | Background color for indeterminate state |
selection/selected-bd | --f-selection-colors-selected-border | fun-input[type='checkbox']:checked, fun-input[type='radio']:checked | Border color for checked state |
Additional Available Tokens
These tokens are defined but not currently used in the base fun-input classes:
| Token Name | CSS Variable | Description |
|---|---|---|
input/default-icon | --f-input-colors-default-icon | Default icon color |
input/selected-bg | --f-input-colors-selected-background | Background color for selected state |
selection/default-txt | --f-selection-colors-default-text | Default text color for selections |
selection/hover-txt | --f-selection-colors-hover-text | Text color on hover for selections |
selection/selected-icon | --f-selection-colors-selected-icon | Icon color for selected state |
selection/default-icon | --f-selection-colors-default-icon | Default icon color for selections |
selection/hover-bg | --f-selection-colors-hover-background | Background color on hover for selections |
selection/active-bd | --f-selection-colors-active-border | Border color for active state |
selection/md-height | --f-selection-sizes-md-height | Height for medium selection inputs |
selection/lg-height | --f-selection-sizes-lg-height | Height for large selection inputs |
TODO: index
Guidelines
Guidelines for using input components will be added here.
