Mixins / foldkit-mixins-ui

OtpFieldSlots

const · packages/mixins-ui/src/otpField.ts:15

const OtpFieldSlots: Slots.Contract<{
  readonly root: Slot.UnnamedSlot<
    Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >,
    readonly Slot.EventName[],
    readonly Slot.AttributeName[],
    readonly Slot.RequirementName[],
    boolean
  >
  readonly input: Slot.UnnamedSlot<
    Capability.Capability<
      'Focusable',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >,
    readonly [Event.EventToken<'input'>],
    readonly [Attr.AttrToken<'aria-label'>, Attr.AttrToken<'disabled'>],
    readonly Slot.RequirementName[],
    boolean
  >
  readonly group: Slot.UnnamedSlot<
    Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >,
    readonly Slot.EventName[],
    readonly Slot.AttributeName[],
    readonly Slot.RequirementName[],
    boolean
  >
  readonly cell: Slot.UnnamedSlot<
    Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >,
    readonly Slot.EventName[],
    readonly Slot.AttributeName[],
    readonly Slot.RequirementName[],
    boolean
  >
  readonly separator: Slot.UnnamedSlot<
    Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >,
    readonly Slot.EventName[],
    readonly Slot.AttributeName[],
    readonly Slot.RequirementName[],
    boolean
  >
}>

A one-time code, as shadcn's input-otp: one real <input> laid over cells that only show its characters. The browser keeps everything a code field needs (paste, Backspace, the caret, the SMS code a phone offers through autocomplete="one-time-code", the field's accessible name), so the cells hold no focus of their own and no Command moves it between them. The code is the application's: the view draws value, and sends onChange with what was typed, kept to pattern and length. The cell where the next character goes is marked data-next, for a caret while the field has focus.