Skip to content
BigBang

Popular

    ↑↓Navigate↵OpenEscClose
    TR

    Components

    PasswordInput

    A password field with an eye button, and an optional rule list, strength bar and Caps Lock warning.

    Storybook
    Storybook
    Source
    Source

    Installation

    Section titled “Installation”
    Package
    @bigbang/ui
    Import
    import { PasswordInput } from '@bigbang/ui';
    Source
    PasswordInput.tsx
    Storybook
    PasswordInput · Playground

    PasswordInput is in the @bigbang/ui package.

    import { PasswordInput } from '@bigbang/ui';
    

    <PasswordInput label="New password" autoComplete="new-password" rules={rules} showStrength />;

    Props

    Section titled “Props”
    labelRequired
    Description
    The visible label of the field, bound to the input with <label>.
    Type
    string
    description
    Description
    Help text under the field, linked to the input with aria-describedby.
    Type
    ReactNode
    error
    Description
    When set, the field is marked invalid and the message is read with the input.
    Type
    string
    invalid
    Description
    Marks the field invalid without a message, for example when the message is in an error summary.
    Type
    boolean
    Default
    false
    required
    Description
    The value is required: the input gets required, and the label is marked.
    Type
    boolean
    Default
    false
    necessityIndicator
    Description
    Which fields the form marks: 'required' marks required fields, 'optional' marks the others.
    Type
    'required' | 'optional'
    Default
    'required'
    autoCompleteRequired
    Description
    Tells password managers what to do: 'current-password' fills a saved one on sign-in, 'new-password' offers to generate one. Required so managers always work.
    Type
    'current-password' | 'new-password'
    rules
    Description
    Requirements shown as a checklist under the field and linked to it; each turns green when met. Use them with 'new-password'.
    Type
    readonly PasswordRule[]
    showStrength
    Description
    Shows a three-step strength bar with a text level. It counts the met rules, or length, mixed case, digits and symbols without rules.
    Type
    boolean
    Default
    false
    size
    Description
    Input height: 32, 36 and 40 px.
    Type
    'sm' | 'md' | 'lg'
    Default
    'md'
    value
    Description
    Controlled value. Pass it with onValueChange.
    Type
    string
    defaultValue
    Description
    Initial value when the field is uncontrolled.
    Type
    string
    onValueChange
    Description
    Called whenever the value changes.
    Type
    ((value: string, eventDetails: { reason: 'none'; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element; }) => void)
    placeholder
    Description
    Text shown while the field is empty. Do not repeat the label or put the rules here.
    Type
    string
    readOnly
    Description
    The value can be focused but not changed.
    Type
    boolean
    Default
    false
    disabled
    Description
    Disables the field, its label and the reveal button.
    Type
    boolean
    Default
    false
    name
    Description
    Field name used when the form is submitted.
    Type
    string
    className
    Description
    Added to the root element; use it for layout only.
    Type
    string

    Data attributes

    Section titled “Data attributes”
    • data-component="password-input": on the root element.
    • data-part: label, box, control, visibility-toggle, caps-lock, rules, rule, strength, error.
    • data-met: on a met rule. data-level: on the strength part (weak, fair, strong).