MaskedInput

MaskedInput applies lightweight masks such as 999-999, AAAA-9999, and ***-999 without adding a parser dependency.

#Default usage

<MaskedInput aria-label="License key" mask="AAAA-9999" />

#Import

import { MaskedInput } from "@froggdesign/enter-ui-react";

#Controlled

<MaskedInput
  mask="999-999"
  value={phone}
  onValueChange={(masked, raw) => {
    setPhone(masked);
    setPhoneRaw(raw);
  }}
/>

#Patterns

Use MaskedInput for short predictable formats: phone extensions, serial keys, invite codes, license keys, and support references.

#Accessibility

Keep the mask visible through placeholder or field help text so users understand the expected format. Masks are intentionally simple and should not replace server-side validation.

#API

• mask: pattern using 9 for digits, A for letters, and * for alphanumeric characters.
• value, defaultValue: masked value.
• onValueChange: called with (maskedValue, rawValue).
• placeholder: defaults to the mask.

#Styling

MaskedInput uses .eui-masked-input classes and FroggDesign tokens for layout, state, focus, and disabled styling.