PasswordInput

A simple password input that allows the user to toggle the visibility of the entered value. It utilizes the TextInput component and accepts all of the same props, but the type is set to password.

Props

className

String

Examples

Default Usage

<State initial={{ value: '' }}>
  {({ state, setState }) => (
    <PasswordInput
      name="password"
      onChange={(name, value) => setState({ value })}
      placeholder="Password..."
      value={state.value}
    />
  )}
</State><State initial={{ value: '' }}>
  {({ state, setState }) => (
    <PasswordInput
      name="password"
      onChange={(name, value) => setState({ value })}
      placeholder="Password..."
      value={state.value}
    />
  )}
</State>

Error Modifier

<PasswordInput
  error
  name="password"
  onChange={() => {}}
  placeholder="Password..."
  value="This input has an error"
/><PasswordInput
  error
  name="password"
  onChange={() => {}}
  placeholder="Password..."
  value="This input has an error"
/>

Disabled Modifier

<PasswordInput
  disabled
  name="password"
  onChange={() => {}}
  placeholder="Password..."
  value="This input cannot be modified"
/><PasswordInput
  disabled
  name="password"
  onChange={() => {}}
  placeholder="Password..."
  value="This input cannot be modified"
/>

Size Modifier

<div className="docs-vertical-group">
  <PasswordInput
    name="password"
    onChange={() => {}}
    placeholder="Small"
    size="small"
  />
  <PasswordInput name="password" onChange={() => {}} placeholder="Medium" />
  <PasswordInput
    name="password"
    onChange={() => {}}
    placeholder="Large"
    size="large"
  />
</div><div className="docs-vertical-group">
  <PasswordInput
    name="password"
    onChange={() => {}}
    placeholder="Small"
    size="small"
  />
  <PasswordInput name="password" onChange={() => {}} placeholder="Medium" />
  <PasswordInput
    name="password"
    onChange={() => {}}
    placeholder="Large"
    size="large"
  />
</div>