Components

DhPinInput

Stateless code-entry indicator — a row of dots showing how many slots of a fixed-length code are filled. Display-only: no value, no masking, no validation. Pair with DhNumberPad for PIN or OTP entry.

Progress

Display-only. Pass the total length and how many slots are filled — typically your entered string's length. The component holds no value and does no masking; the dots only show progress.

Light dh-pin-input partial (light theme)
Dark dh-pin-input partial (dark theme)
var pin by remember { mutableStateOf("") }

DhPinInput(length = 4, filledCount = pin.length)

Error

State.Error tints the filled dots with the error colour to flag a rejected code. Drive it from your own validation.

Light dh-pin-input error (light theme)
Dark dh-pin-input error (dark theme)
DhPinInput(
    length = 4,
    filledCount = 4,
    state = DhPinInput.State.Error
)