Mixins / foldkit-mixins-ui

OtpField

namespace · packages/mixins-ui/src/otpField.ts:1

export * as OtpField from './otpField.js'

In the guides

Members

OtpField.kept

function · packages/mixins-ui/src/otpField.ts:49

function kept(
  text: string,
  length: number,
  pattern?: keyof typeof PATTERNS,
): string

text kept to the characters pattern allows, at most length of them.

OtpField.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.

OtpField.OtpFieldView

interface · packages/mixins-ui/src/otpField.ts:29

interface OtpFieldView<Message> {
  readonly label: string
  readonly length?: number | undefined
  readonly value: string
  readonly onChange: (value: string) => NoInfer<Message>
  readonly pattern?: keyof typeof PATTERNS | undefined
  readonly groups?: ReadonlyArray<number> | undefined
  readonly disabled?: boolean | undefined
  readonly style?: NamedStyle<typeof OtpFieldSlots> | undefined
  readonly mixins?: MixinList<Message> | undefined
}

OtpField.view

function · packages/mixins-ui/src/otpField.ts:55

function view<Message>(
  options: OtpFieldView<Message>,
  h: HtmlBuilder<Message>,
): Html