Skip to content

Form

Default Values

jsx
// Form selectors.
$input-selector: "input" !default;
$textarea-selector: "textarea" !default;
$select-selector: "select" !default;
$label-selector: "label" !default;
$fieldset-selector: "fieldset" !default;

// Fieldset properties.
$fieldset-direction: column !default;

Form Properties

jsx
--#{root-defaults.$prefix}input-padding-x
--#{root-defaults.$prefix}input-padding-y
--#{root-defaults.$prefix}input-padding
--#{root-defaults.$prefix}input-font-size
--#{root-defaults.$prefix}label-font-size
--#{root-defaults.$prefix}fieldset-direction
--#{root-defaults.$prefix}fieldset-gap
--#{root-defaults.$prefix}fieldset-padding-x
--#{root-defaults.$prefix}fieldset-padding-y
--#{root-defaults.$prefix}fieldset-padding
--#{root-defaults.$prefix}fieldset-font-size

Background Properties

jsx
--#{root-defaults.$prefix}input-background
--#{root-defaults.$prefix}fieldset-background

Text Properties

jsx
--#{root-defaults.$prefix}input-color
--#{root-defaults.$prefix}input-placeholder-color
--#{root-defaults.$prefix}label-color
--#{root-defaults.$prefix}fieldset-color
--#{root-defaults.$prefix}input-disabled-color
--#{root-defaults.$prefix}input-disabled-placeholder-color
--#{root-defaults.$prefix}label-disabled-color
--#{root-defaults.$prefix}fieldset-disabled-color

Border Properties

jsx
--#{root-defaults.$prefix}input-border-width
--#{root-defaults.$prefix}botton-border-style
--#{root-defaults.$prefix}input-border
--#{root-defaults.$prefix}input-border-radius
--#{root-defaults.$prefix}fieldset-border-width
--#{root-defaults.$prefix}fieldset-border-style
--#{root-defaults.$prefix}fieldset-border
--#{root-defaults.$prefix}fieldset-border-radius

Border Colour Properties

jsx
--#{root-defaults.$prefix}input-border-color
--#{root-defaults.$prefix}input-disabled-border-color
--#{root-defaults.$prefix}fieldset-border-color
--#{root-defaults.$prefix}fieldset-disabled-border-color

Accent Colour Properties

jsx
--#{root-defaults.$prefix}input-accent-color