Mixins / foldkit-mixins-ui

PasswordInput

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

export * as PasswordInput from './passwordInput.js'

In the guides

Members

PasswordInput.PasswordInputSlots

const · packages/mixins-ui/src/passwordInput.ts:20

const PasswordInputSlots: 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 label: 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 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 input: Slot.UnnamedSlot<Capability.Capability<"TextInput", readonly [Capability.Capability<"Focusable", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>]>, readonly [Event.EventToken<"input">], readonly [Attr.AttrToken<"aria-invalid">, Attr.AttrToken<"disabled">, Attr.AttrToken<"value">], readonly Slot.RequirementName[], boolean>; readonly toggle: Slot.UnnamedSlot<Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>, readonly [Event.EventToken<"click">], readonly [Attr.AttrToken<"aria-label">, Attr.AttrToken<"aria-pressed">, Attr.AttrToken<"disabled">], …;

A password field with a toggle that shows the password as text, Zag's password input: the toggle is a button outside the form's submission, named for what it does and aria-pressed while the text shows, as the APG's toggle button keeps its name and changes its state. The text and whether it shows are the application's.

PasswordInput.PasswordInputView

interface · packages/mixins-ui/src/passwordInput.ts:37

interface PasswordInputView<Message> {
  readonly id: string
  readonly label: string
  readonly value: string
  readonly onInput: (value: string) => NoInfer<Message>
  readonly visible: boolean
  readonly onToggle: NoInfer<Message>
  readonly autocomplete?: 'current-password' | 'new-password' | undefined
  readonly toggleLabel?: string | undefined
  readonly description?: string | undefined
  readonly placeholder?: string | undefined
  readonly invalid?: boolean | undefined
  readonly disabled?: boolean | undefined
  readonly style?: NamedStyle<typeof PasswordInputSlots> | undefined
  readonly mixins?: MixinList<Message> | undefined
}

PasswordInput.view

function · packages/mixins-ui/src/passwordInput.ts:61

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