Inputs



Variable name Default value Description
--b-input #fff Background color for the input component.
--c-input #000 Color for the input component.
--border-input gray Border color for the input component.
--border-input-focus purple Border color for the input component on focus.
--fs-input 1rem Font size for the input component.
--fw-input 500 Font weight for the input component.
--br-input .3rem Border radius for the input component.
--c-placeholder #ccc Color of the placeholder text in the input component.
--fs-label .85rem Font size for the label of the input component.
--c-label gray Color for the label of the input component.
--b-label purple Background color for the label of the input component.
--ff-input inherit Font family for the input component.
--r-textarea none Resize property for textarea elements in the input component.


CSS Class Description
input Base class for input components, including input, select, and textarea. Sets display, flex-direction, and position.
input > input, input > select, input > textarea Styles for input, select, and textarea elements within the input class. Sets background, border, border-radius, font-family, font-size, font-weight, line-height, outline, padding, resize, text-overflow, and transition.
input:disabled Styles for disabled state of input, select, and textarea elements. Adjusts opacity, pointer-events, and user-select.
input:focus Styles for focus state of input, select, and textarea elements. Adjusts border-color.
input::placeholder Styles for the placeholder in input elements. Sets color.
input.active > input, input.active > select, input.active > textarea Styles for active state of input components. Adjusts border-color.
input > label Styles for label elements within the input class. Sets color, font-size, margin-bottom, transform, and user-select.
input-b Variant of the input class. Adjusts border-width, border-radius, and padding for input, select, and textarea elements, and modifies label styling.
input-l Variant of the input class with label styling. Adjusts background, border-radius, position, and other properties for labels.
input-before, input-after Variants of the input class for adding elements before or after the input. Adjusts border-radius, height, overflow, and padding.