PinCode - Semi Design Next

Demos

How to import

import { Button, PinCode, Typography } from '@fibrous/semi-ui-solid';

Basic usage

Code

import { PinCode } from '@fibrous/semi-ui-solid';

export default function PinCodeDemo() {
    return (
        <>
            <PinCode
                aria-label="Verification code, small"
                size="small"
                defaultValue="123456"
                onComplete={(value) => console.log('pincode: ', value)}
                onChange={(value) => {
                    console.log(value);
                }}
            />
            <br />
            <PinCode
                aria-label="Verification code, default"
                size="default"
                defaultValue="123456"
                onComplete={(value) => console.log('pincode: ', value)}
                onChange={(value) => {
                    console.log(value);
                }}
            />
            <br />
            <PinCode
                aria-label="Verification code, large"
                size="large"
                defaultValue="123456"
                onComplete={(value) => console.log('pincode: ', value)}
                onChange={(value) => {
                    console.log(value);
                }}
            />
        </>
    );
}

Controlled

Use value to pass in the verification code string and onChange to write the new content back into a signal for controlled use

Code

import { createSignal } from 'solid-js';
import { Button, PinCode } from '@fibrous/semi-ui-solid';

export default function PinCodeDemo() {
    const [value, setValue] = createSignal('69af41');
    return (
        <>
            <Button onClick={() => setValue(String(Math.floor(Math.random() * 100000000)).slice(0, 6))}>Set Random Value</Button>
            <br />
            <br />
            <PinCode
                aria-label="Verification code"
                format="mixed"
                onComplete={(code) => console.log('pincode: ', code)}
                value={value()}
                onChange={(code) => {
                    console.log(code);
                    setValue(code);
                }}
            />
        </>
    );
}

Limit verification code format

Set the number of digits

Set the number of digits through count, the default is 6 digits, the demo below is set to 4 digits

Code

import { PinCode } from '@fibrous/semi-ui-solid';

export default function PinCodeDemo() {
    return (
        <>
            <PinCode
                aria-label="Verification code"
                size="large"
                defaultValue="6688"
                count={4}
                onComplete={(value) => console.log('pincode: ', value)}
                onChange={(value) => {
                    console.log(value);
                }}
            />
        </>
    );
}

Set character range

Use format to control the character range that can be entered

Pass "number" to only allow numbers
Pass "mixed" to allow numbers and letters
Pass in a regular expression to only allow characters that can be judged by the regular expression
Pass in a function, and the verification code will be passed in as parameters in units of characters for verification when entering. When the function returns true, the character is allowed to be entered into the PinCode

纯数字

字母和数字

只大写字母

只小写字母(函数判断)

Code

import { PinCode, Typography } from '@fibrous/semi-ui-solid';

const isLowerCase = (char: string) => /[a-z]/.test(char);

export default function PinCodeDemo() {
    return (
        <>
            <Typography.Text id="pincode-format-number">纯数字</Typography.Text>
            <PinCode aria-labelledby="pincode-format-number" format="number" onComplete={(value) => console.log('pincode: ', value)} />
            <br />
            <Typography.Text id="pincode-format-mixed">字母和数字</Typography.Text>
            <PinCode aria-labelledby="pincode-format-mixed" format="mixed" onComplete={(value) => console.log('pincode: ', value)} />
            <br />
            <Typography.Text id="pincode-format-upper">只大写字母</Typography.Text>
            <PinCode aria-labelledby="pincode-format-upper" format={/[A-Z]/} onComplete={(value) => console.log('pincode: ', value)} />
            <br />
            <Typography.Text id="pincode-format-lower">只小写字母(函数判断)</Typography.Text>
            <PinCode aria-labelledby="pincode-format-lower" format={isLowerCase} onComplete={(value) => console.log('pincode: ', value)} />
        </>
    );
}

Manual focus and blur

ref points at the group root element (role="group"). Call focus() to focus the first empty box, or the last box once all of them are filled; call blur() to remove focus. Focusing a box by index is not available yet; reach the input directly instead, for example ref.querySelectorAll('input')[2].focus() focuses the third box, counted from 0.

Code

import { createSignal } from 'solid-js';
import { Button, PinCode } from '@fibrous/semi-ui-solid';

export default function PinCodeDemo() {
    const [value, setValue] = createSignal('69af41');
    let pinCode: HTMLDivElement | undefined;
    return (
        <>
            <Button onClick={() => pinCode?.querySelectorAll<HTMLInputElement>('input').item(2)?.focus()}>Focus Third Input</Button>
            <br />
            <br />
            <PinCode
                aria-label="Verification code"
                format="mixed"
                ref={(node) => (pinCode = node)}
                onComplete={(code) => console.log('pincode: ', code)}
                value={value()}
                onChange={(code) => {
                    console.log(code);
                    setValue(code);
                }}
            />
        </>
    );
}

API Reference

Props

Property	Description	Type	Default
count	Number of digits.	`number`	`6`
defaultValue	Initial content when uncontrolled.	`string`	-
disabled	Whether the input is disabled.	`boolean`	-
format	Format limit for a single character: number allows digits only, mixed allows digits and letters, and a regular expression or function judges each character.	`Type`	`"number"`
onBlur	Called when focus leaves the whole code, with the native `FocusEvent`.	`Type`	-
onChange	Called when the content changes, with the current content.	`Type`	-
onComplete	Called once all digits are entered, with the current content.	`Type`	-
onFocus	Called when focus enters the code from outside, with the native `FocusEvent`; moving between the inputs does not call it.	`Type`	-
size	Input size: large, default or small.	`InputSize`	-
validateStatus	Validation status, passed to every input; error shows the error style.	`ValidateStatus`	-
value	Input content. Passing it makes the component controlled, so update it in onChange.	`string`	-

class, style, aria-label, aria-labelledby and data-* land on the role="group" root element. id lands on the first input box, so <label for> points at the first digit. aria-describedby, aria-errormessage, aria-invalid, aria-required and tabindex land on every input box. name is discarded. autofocus focuses the first input box on mount and defaults to false; turn it on only when the user has just entered the code step.

Accessibility

ARIA

The root element is role="group", named through aria-label or aria-labelledby; pass aria-label when there is no visible label, otherwise the group has no name.
Each input box takes its accessible name from the locale, for example "Digit 1 of 6", which follows count and the box index, so nothing needs to be set by hand.
aria-describedby, aria-errormessage, aria-invalid and aria-required land on every input box; validateStatus is passed to every input box.
With format set to "number" the input boxes use the numeric soft keyboard (inputmode="numeric"); otherwise the text keyboard.

Keyboard and Focus

Each box is its own input; after a valid character is entered, focus moves to the next box, and entering the last box blurs it. The filled characters always run from the first box without gaps, so a character typed after an empty box lands in the first empty box. Tab and Shift + Tab move between boxes.
Left Arrow and Right Arrow move focus between boxes. Backspace and Delete both delete the character in the current box and the following characters move forward; Backspace also moves focus to the previous box.
Pasting a whole code fills the boxes by character from the current box, and stops at the first invalid character.
autoFocus (autofocus in Vue) should be turned on only when the user has just entered the code step: focus moving at page load makes screen readers skip the content before it.

The prop is named autofocus and behaves as described above.