HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
Pin InputView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA short code, one character to a box.StableSince 0.1.0FormsUsageimport'@fusion.dev/helix/pin-input'import'@fusion.dev/helix-headless/pin-input'Preview
API ReferenceRoothelix-pin-inputA short code, one character to a box.
PropTypeDefaultDescriptionautocompletestring"one-time-code"What the browser may autofill, reaching the first cell only.cellLabelstring"Character {index} of {length}"Accessible name for one box, with `{index}` and `{length}` filled in.defaultValuestring""The value the markup declared, which is where a reset returns to.disabledbooleanfalseWhether the control is non-interactive.feedbackstring""What is wrong, in the reader's words rather than the browser's.hintstring""Help under the control, shown while there is nothing wrong.labelstring""The accessible name, and the fallback for the `label` slot.lengthnumber6How many characters the code has.maskbooleanfalseWhether the characters are hidden, the way a password is.namestring""Name submitted with the form.placeholderstring""What an empty box shows, usually a single dot.readOnlybooleanfalseWhether the boxes refuse input while still submitting their value.requiredbooleanfalseWhether the form refuses to submit without it.typePinType"numeric"What a box accepts, which decides the keyboard a phone offers.valuestringWhat the control holds now, and what its form submits.
ReadTypeDescriptionformHTMLFormElement|nullThe form this control belongs to, if any.labelsNodeListLabels associated with this control.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
EventTypeDescriptionchangeEventAnnounced with a filled code, and when an edited one loses focus.helix-before-changeHelixBeforeChangeEventFired as the code changes, and cancelable.helix-completeHelixCompleteEventFired when the last box is filled.inputEventAnnounced once the value has moved.
MethodTypeDescriptionclear() => voidEmpties every box and returns to the first.focus(options: FocusOptions) => voidPuts the caret in the first empty box, which is where a reader resumes.requestValue(next: string) => booleanRequests a new value, and reports whether the request stood.
PartDescriptioncellOne box.feedbackWhat is wrong with it.fieldThe row of boxes.hintHelp under the boxes, while nothing is wrong.labelThe question, over the boxes.
CSS PropertyDescription--pin-input-gapSpace between one box and the next.
Roothelix-headless-pin-inputA short code, one character to a box.
PropTypeDefaultDescriptionautocompletestring"one-time-code"What the browser may autofill, reaching the first cell only.cellLabelstring"Character {index} of {length}"Accessible name for one box, with `{index}` and `{length}` filled in.defaultValuestring""The value the markup declared, which is where a reset returns to.disabledbooleanfalseWhether the control is non-interactive.feedbackstring""What is wrong, in the reader's words rather than the browser's.hintstring""Help under the control, shown while there is nothing wrong.labelstring""The accessible name, and the fallback for the `label` slot.lengthnumber6How many characters the code has.maskbooleanfalseWhether the characters are hidden, the way a password is.namestring""Name submitted with the form.placeholderstring""What an empty box shows, usually a single dot.readOnlybooleanfalseWhether the boxes refuse input while still submitting their value.requiredbooleanfalseWhether the form refuses to submit without it.typePinType"numeric"What a box accepts, which decides the keyboard a phone offers.valuestringWhat the control holds now, and what its form submits.
ReadTypeDescriptionformHTMLFormElement|nullThe form this control belongs to, if any.labelsNodeListLabels associated with this control.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
EventTypeDescriptionchangeEventAnnounced with a filled code, and when an edited one loses focus.helix-before-changeHelixBeforeChangeEventFired as the code changes, and cancelable.helix-completeHelixCompleteEventFired when the last box is filled.inputEventAnnounced once the value has moved.
MethodTypeDescriptionclear() => voidEmpties every box and returns to the first.focus(options: FocusOptions) => voidPuts the caret in the first empty box, which is where a reader resumes.requestValue(next: string) => booleanRequests a new value, and reports whether the request stood.
PartDescriptioncellOne box.feedbackWhat is wrong with it.fieldThe row of boxes.hintHelp under the boxes, while nothing is wrong.labelThe question, over the boxes.
ExamplesNameDescriptionCompleteThe boxes advance as you type, and the last one completes the code.DisabledDisabled, with the code still readable.EventsOne event per character, and a different one the moment the code is whole.InvalidA code the field will not accept.LengthsFour boxes and six, which are the two codes anybody sends.MaskedThe characters hidden as they are typed, for a code that is a secret.PreviewA code across separate boxes, one character each.PreviewA code across separate boxes, one character each.Read OnlyA code shown rather than asked for, still selectable and still announced.