Skip to main content
⌘K
Last modified: 4/Oct/2024

Password

Password component is a special case of text input.

#Usage

import { Password } from '@kinsta/stratus'

const MyComponent = () => (
  <Password />
)

#Props

Password component can accept any props that Input can, including all properties from the HTMLInputElement interface. On top of that there is one extra prop on Password.

#options
{ revealPasswordText?: string; hidePasswordText?: string; }
Tooltip message for reveal and hide password options
#isDisabled
boolean
Set the disabled state of input
#isReadOnly
boolean
Set content to be readonly
#hasAutoFocus
boolean
Set that the input should be focused when rendered
#hasError
boolean
Set the error state of the input
#addonBefore
ReactNode
Content of the addon before the input box
#addonAfter
ReactNode
Content of the addon after the input box
#prefixItem
ReactNode
Content of the prefix of the input
#suffixItem
ReactNode
Content of the suffix of the input
#label
string | ReactElement<any, string | JSXElementConstructor<any>>
Content of the label
#description
string | ReactElement<any, string | JSXElementConstructor<any>>
Content of the description
#errorMessage
string | ReactElement<any, string | JSXElementConstructor<any>>
Content of the error message
#unit
string
Sets the unit of the input

#Types

  • PasswordProps: props of the Password component processed by stratus
  • PasswordInterface: PasswordProps extended by Omit<InputHTMLAttributes<HTMLInputElement>, 'prefix' | 'type'>

Read more about types here

#See also