Input Splitted

Group of input fields. Perfect e.g. for entering PIN or TOTP.

Demo

Code

<bl-input-splitted length="4"></bl-input-splitted>

Styling With CSS Variables

Even if light-dom isn’t enabled, you can still use CSS variables to style the input elements.

Code

<div id="StylingWithCssVariables">
    <style>
        #StylingWithCssVariables bl-input-splitted {
            --blue-input-splitted-border: 1px solid #dee2e6;
            --blue-input-splitted-border-radius: 0.375rem;
            --blue-input-splitted-padding: 0.375rem 0.75rem;
            --blue-input-splitted-text-align: center;

            display: flex;
            gap: 0.25rem;
        }

        #StylingWithCssVariables bl-input-splitted:focus {
            --blue-input-splitted-border: 1px solid #86b7fe;
            --blue-input-splitted-box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
        }

        /* If the input elements are bordered red, shadow is open. */
        #StylingWithCssVariables input {
            border-color: red !important;
        }
    </style>

    <bl-input-splitted length="4"></bl-input-splitted>
</div>

Use Label

Enter a PIN

Code

<div>
    <label for="my-pin-input-1">Enter a PIN</label>
    <bl-input-splitted id="my-pin-input-1" length="4"></bl-input-splitted>
</div>

Use Label Without Shadow

Enter a PIN

Code

<div>
    <label for="my-pin-input">Enter a PIN</label>
    <bl-input-splitted light-dom control-1-id="my-pin-input" length="4"></bl-input-splitted>
</div>

Grab the code

When you don't use the entire Blue Web library, you can also just copy and paste the required code into your own project.

Copy and paste the following code into your project. Source: @/src/js/input-splitted.ts

Edit post on GitHub