Learn how to customize the React Floating Labels component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
On this page
CSS variables
.form-floating carries the tokens, so a single field can be retuned without recompiling. Anything nested inside it follows them, including the date and time inputs, which drive their own float on :focus-within instead of :placeholder-shown.
$form-floating-tokens: () !default;
$form-floating-tokens: defaults(
(
--cui-form-floating-height: calc(3.5rem + var(--cui-btn-input-border-width) * 2),
--cui-form-floating-line-height: 1.25,
--cui-form-floating-padding-x: var(--cui-btn-input-padding-x),
--cui-form-floating-padding-y: 1rem,
--cui-form-floating-input-padding-t: 1.625rem,
--cui-form-floating-input-padding-b: .625rem,
--cui-form-floating-label-height: 1.5em,
--cui-form-floating-label-opacity: .65,
--cui-form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem),
--cui-form-floating-label-disabled-color: var(--cui-fg-3),
// The label is a sibling of the control, so it cannot inherit its background.
--cui-form-floating-label-bg: var(--cui-btn-input-bg),
--cui-form-floating-label-disabled-bg: var(--cui-bg-2),
--cui-form-floating-label-border-radius: var(--cui-btn-input-border-radius),
--cui-form-floating-transition-property: #{"opacity, transform"},
--cui-form-floating-transition-duration: .1s,
--cui-form-floating-transition-timing: ease-in-out,
),
$form-floating-tokens
);