Skip to main content

SPHTextField Documentation

Helper Text
Helper Text

HTML

<div class="sph-text-field">
    <label class="sph-text-field__label" for="your-id-here">Label</label>
    <input class="sph-text-field__input" type="text" id="your-id-here" />
    <small class="sph-text-field__helper">Helper Text</small>
</div>

SCSS

CSS Classes & HTML Attributes API

ClassEffect
.sph-text-fieldThe main text field component.
.sph-text-field__labelThe component's label element.
.sph-text-field__inputThe component's input field element.
.sph-text-field__helperThe component's helper text element. This can contain error messages, character limit text, or any text that helps identify a fairly vague input label.
.sph-text-field--elevatedAn additional class to be put on top of the .sph-text-field class to render the component in its variant with elevation.
.errorAn additional class to be put on top of the .sph-text-field class to render the component in its error state.

SCSS variables API (using with ())

PropertyEffect
$text-field-fillChanges the component's default state background color.
$text-field-inkChanges the component's default state text color.
$text-field-sizeChanges the component's text size.
$text-field-radiusChanges the component's border radius.
$text-field-elevation-colorChanges the component's elevation/shadow color.
$text-field-label-inkChanges the component's label text color.
$text-field-helper-inkChanges the component's helper text color.
$text-field-focused-borderChanges the component's border color when focused.
@use '~@surpathhub/ugnay/SPHTextField' with (
    $text-field-radius: 0.7rem
);

@include SPHTextField.use();

CSS custom properties API

PropertyEffect
--sph-text-field-fillChanges the component's default state background color.
--sph-text-field-inkChanges the component's default state text color.
--sph-text-field-sizeChanges the component's text size.
--sph-text-field-radiusChanges the component's border radius.
--sph-text-field-label-inkChanges the component's label text color.
--sph-text-field-helper-inkChanges the component's helper text color.
--sph-text-field-focused-borderChanges the component's border color when focused.
.sph-text-field {
    --sph-text-field-fill: blue;
    --sph-text-field-ink: #FFF;
}