StellarUI

<stellar-passcode>

Properties

Preview

Markup

Copy

<stellar-passcode

  label="Authorization code"
  description="Open your authenticator app to get the code."
  format="### ###"
  value="530901"
  name="code"
>
</stellar-passcode>

API

Complete props, events, slots, and implementation notes for the shipped passcode.

Props

Prop	Type	Default
`tone`	`neutral \| primary \| secondary \| tertiary \| error`	`neutral`
`size`	`xs \| sm \| md \| lg \| xl`	`md`
`label`	`string`	`''`
`description`	`string`	`''`
`name`	`string`	`''`
`value`	`string`	`''`
`format`	`string`	`####`
`disabled`	`boolean`	`false`
`masked`	`boolean`	`false`
`type`	`numeric \| alpha \| alphanumeric \| any`	`numeric`
`case-sensitive`	`boolean`	`false`
`required`	`boolean`	`false`
`pattern`	`string`	`''`
`autocomplete`	`string`	`one-time-code`
`autofocus`	`boolean`	`false`
`enterkeyhint`	`enter \| done \| go \| next \| previous \| search \| send`	`enter`

Events

Event	Source	Notes
`input`	host	Fires when the passcode value changes.
`change`	host	Fires when the underlying text input commits a change.
`input-complete`	host	Fires once the number of entered characters matches the format length.
`focus`	host	Redispatched when the hidden text input receives focus.
`blur`	host	Redispatched when the hidden text input loses focus.

Slots

Slot	Notes
`label`	Optional label content. Overrides the `label` prop when present.
`description`	Optional helper content. Overrides the `description` prop when present.

Notes

The public tag is `stellar-passcode`, matching the shipped fixed-length passcode input surface.
`format` controls character cells and delimiters; only `#` positions accept input and delimiter characters are visual-only.
`type` filters allowed characters (`numeric`, `alpha`, `alphanumeric`, `any`) before value updates are emitted.
`tone` controls the border and active focus-ring color on the character boxes.
`masked` hides rendered characters with bullets while preserving the submitted value.
`required`, `aria-invalid`, and `custom-validity` forward to the inner native text input for validation-sensitive flows.
The host exposes `setCustomValidity()`, `checkValidity()`, `reportValidity()`, `validity`, `validationMessage`, and `willValidate`, so app code can use native-like validity APIs on the custom element.
For Datastar, prefer `data-attr:custom-validity="..."` on the custom element host instead of the Pro-only `data-custom-validity` attribute.
`input-complete` fires when the entered character count reaches the format's placeholder count.