Leave Yamada UI a star

Star
Yamada UIYamada UIv1.7.2

PasswordInput

We are currently considering the development of PasswordInput.

Source@yamada-ui/password-input

Props

PasswordInputProps

colorScheme

Description

The visual color appearance of the component.

Type

"blackAlpha" | "whiteAlpha" | "amber" | "blue" | "info" | "link" | "primary" | "cyan" | "emerald" | "flashy" | "fuchsia" | "gray" | "green" | "success" | "indigo" | "lime" | "neutral" | "orange" | "warning" | "pink" | "purple" | "red" | "danger" | "rose" | "sky" | "teal" | "violet" | "secondary" | "yellow"

containerProps

Description

The props for the container element.

Type

HTMLUIProps

defaultIsVisible

Deprecated

Description

Determines whether the password input is visible by default.

Deprecated

Use defaultVisible instead.

Type

boolean

Default

false

defaultVisible

Description

Determines whether the password input is visible by default.

Type

boolean

Default

false

errorBorderColor

Description

The border color when the input is invalid.

Type

"border" | BorderColor | "amber.50" | "amber.100" | "amber.200" | "amber.300" | "amber.400" | "amber.500" | "amber.600" | "amber.700" | "amber.800" | "amber.900" | ... 320 more ... | [...]

focusBorderColor

Description

The border color when the input is focused.

Type

"border" | BorderColor | "amber.50" | "amber.100" | "amber.200" | "amber.300" | "amber.400" | "amber.500" | "amber.600" | "amber.700" | "amber.800" | "amber.900" | ... 320 more ... | [...]

iconProps

Description

The props for the icon element.

Type

HTMLUIProps

inputProps

Description

The props for the input element.

Type

HTMLUIProps<"input">

invalid

Description

If true, the form control will be invalid.

Type

boolean

Default

false

isDisabled

Deprecated

Description

If true, the form control will be disabled.

Deprecated

Use disabled instead.

Type

boolean

Default

false

isInvalid

Deprecated

Description

If true, the form control will be invalid.

Deprecated

Use invalid instead.

Type

boolean

Default

false

isReadOnly

Deprecated

Description

If true, the form control will be readonly.

Deprecated

Use readOnly instead.

Type

boolean

Default

false

isRequired

Deprecated

Description

If true, the form control will be required.

Deprecated

Use required instead.

Type

boolean

Default

false

isVisible

Deprecated

Description

Determines the visibility of the password input.

Deprecated

Use visible instead.

Type

boolean

Default

false

onVisibleChange

Description

Callback function that is triggered when the visibility of the password input changes.

Type

(visible: boolean) => void

size

Description

The size of the PasswordInput.

Type

"xs" | "sm" | "md" | "lg" | "xl"

Default

"md"

variant

Description

The variant of the PasswordInput.

Type

"filled" | "flushed" | "outline" | "unstyled"

Default

"outline"

visibilityIcon

Description

The icons to be used for the visibility toggle.

Type

{ off: ReactElement<any, string | JSXElementConstructor<any>> on: ReactElement<any, string | JSXElementConstructor<any>> }

visible

Description

Determines the visibility of the password input.

Type

boolean

Default

false

PasswordInputStrengthMeterProps

value

Required

Description

The value of the password strength meter.

Type

number

getStrengthMeterIndicatorProps

Description

The props of the password strength meter indicator.

Type

(percent: number) => StrengthMeterIndicatorProps

max

Description

The maximum value of the password strength meter.

Type

number

Default

4

withLabel

Description

If true, the password strength meter will display the label.

Type

boolean

Default

true

Edit this page on GitHub

PreviousNumberInputNextPinInput