Usage

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

<PinInput />

Examples

Variant

Default

outline

Type

'bordered' | 'filled' | 'outline'

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

export const PinInputVariant = () => {
  return (
    <>
      <PinInput variant="bordered" />
      <PinInput variant="filled" />
      <PinInput variant="outline" />
    </>
  )
}

Size

Default

4

Type

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

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

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

Corner

Default

2

Type

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

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

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

Color

Default

p

Type

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

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

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

Placeholder

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

export const PinInputPlaceholder = () => {
  return (
    <>
      <PinInput length={10} />
      <PinInput placeholder="◊" />
      <PinInput placeholder="◉" />
      <PinInput placeholder="●" />
      <PinInput placeholder="◯" />
      <PinInput placeholder="◵" />
      <PinInput placeholder="◬" />
    </>
  )
}

Length

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

export const PinInputLength = () => {
  return (
    <>
      <PinInput />
      <PinInput length={5} />
      <PinInput length={6} />
      <PinInput length={7} />
      <PinInput length={8} />
      <PinInput length={10} />
    </>
  )
}

Types

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

export const PinInputType = () => {
  return (
    <>
      <PinInput type="number" />
      <PinInput type="text" />
      <PinInput type="password" />
    </>
  )
}

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:;