Usage

import { InputPassword } from '@pillar-ui/core'

<InputPassword />

Examples

Variant

Default

outline

Type

'bordered' | 'filled' | 'outline'

import { InputPassword } from '@pillar-ui/core'

export const InputPasswordVariant = () => {
  return (
    <>
      <InputPassword aria-label="hello" variant="bordered" />
      <InputPassword aria-label="hello" variant="filled" />
      <InputPassword aria-label="hello" variant="outline" />
    </>
  )
}

Corner

Default

2

Type

'0' | '1' | '2' | '3' | '4' | '5' | 'full'

import { InputPassword } from '@pillar-ui/core'

export const InputPasswordCorner = () => {
  return (
    <>
      <InputPassword corner="0" />
      <InputPassword corner="1" />
      <InputPassword corner="2" />
      <InputPassword corner="3" />
      <InputPassword corner="4" />
      <InputPassword corner="5" />
      <InputPassword corner="full" />
    </>
  )
}

Color

Default

p

Type

'i' | 'd' | 'su' | 'se' | 'w' | 'p' | 'b' | 'o'

import { InputPassword } from '@pillar-ui/core'
import { User } from '@pillar-ui/icons'

export const InputPasswordColor = () => {
  return (
    <>
      <InputPassword color="p" />
      <InputPassword color="w" />
      <InputPassword color="se" />
      <InputPassword color="su" />
      <InputPassword color="b" />
      <InputPassword color="d" />
      <InputPassword color="i" />
    </>
  )
}

Size

Default

4

Type

'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'

import { InputPassword } from '@pillar-ui/core'

export const InputPasswordSize = () => {
  return (
    <>
      <InputPassword size="1" />
      <InputPassword size="2" />
      <InputPassword size="3" />
      <InputPassword size="4" />
      <InputPassword size="5" />
      <InputPassword size="6" />
      <InputPassword size="7" />
    </>
  )
}

Status

import { InputPassword } from '@pillar-ui/core'

export const InputPasswordStatus = () => {
  return (
    <>
      <InputPassword />
      <InputPassword readOnly />
      <InputPassword disabled />
      <InputPassword isInvalid />
    </>
  )
}

Prefix

https://

import { InputPassword } from '@pillar-ui/core'
import { User } from '@pillar-ui/icons'
import React from 'react'

export const InputPasswordPrefix = () => {
  return (
    <>
      <InputPassword aria-label="hello" placeholder="Placeholder" />
      <InputPassword aria-label="hello" prefixInput={<User width="16" />} placeholder="Placeholder" />
      <InputPassword aria-label="hello" prefixInput={'https://'} />
    </>
  )
}

Customizing Appearance

Our design system uses CSS variables to set default styles for components. You can customize these variables to change the overall look of your component accross your project.

Available Properties:

/* Change the default corner of the Button */
--field-rad:;
/* Change the default size of the Button */
--field-size:;
/* Change the default size of the Button */
--field-transform:;