- Components
- utilities
- form-input
Form Input Utilities
Utility classes to customize Form Input
Form Input
To use it, simply add the
ui-form-input utility class to your input elements. This class contains base styles. Sizes
The Input component supports the following sizes:
2xs, xs, sm, md, lg, xl. Customize Style
--ui-input-focus-outline: your color; /** When input is focused */
--ui-input-placeholder: your color; /** Placeholder text color */
--ui-input-invalid-outline: your color; /** When input is invalid and focused */Examples
<input type="text" class="ui-form-base ui-form-input ui-form-input-md">Input Checkbox
<input type="checkbox" class="ui-checkbox-radio-base ui-form-checkbox text-primary-600 size-5">
<input type="checkbox" class="ui-checkbox-radio-base ui-form-checkbox text-secondary-500 size-5">
<input type="checkbox" class="ui-checkbox-radio-base ui-form-checkbox text-danger-600 size-5">Style
--ui-checkbox-bg: your color;
--ui-checkbox-border: your color;
--ui-ring-bg: your color;Input Radio
<input type="radio" class="ui-checkbox-radio-base ui-form-radio">
<input type="radio" class="ui-checkbox-radio-base ui-form-radio-secondary">
<input type="radio" class="ui-checkbox-radio-base ui-form-radio-accent">Input Range
<input type="range" class="ui-input-range range-thumb-size-md range-track-bg-surface range-thumb-bg-danger">Style
--range-thumb-bg-gray: your value;
--range-track-bg-gray: your value;Setting Style
Define Focus Color for All Inputs
--ui-input-focus-outline: var(--c-primary-600);