Usage

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

<Input />

Examples

Variant

Default

outline

Type

'bordered' | 'filled' | 'outline'

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

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

Corner

Default

2

Type

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

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

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

Color

Default

p

Type

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

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

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

Size

Default

4

Type

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

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

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

Status

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

export const InputStatus = () => {
  return (
    <>
      <Input />
      <Input disabled />
      <Input readOnly />
      <Input isInvalid />
    </>
  )
}

InputPrefix

https://

import { Button, Input } from '@pillar-ui/core'
import { User } from '@pillar-ui/icons'
import React from 'react'

export const InputPrefix = () => {
  return (
    <>
      <Input aria-label="hello" prefixInput={<User width="16" />} placeholder="Placeholder" variant="filled" />
      <Input aria-label="hello" prefixInput={'https://'} defaultValue="Default Value" variant="filled" />
      <Input
        aria-label="hello"
        prefixInput={
          <Button size="2" corner="0">
            Connect
          </Button>
        }
        defaultValue="Default Value"
        variant="filled"
      />
    </>
  )
}

InputSuffix

.com

import { Button, Input } from '@pillar-ui/core'
import { User } from '@pillar-ui/icons'
import React from 'react'

export const InputSuffix = () => {
  return (
    <>
      <Input aria-label="hello" suffixInput={<User width="16" />} placeholder="Placeholder" variant="filled" />
      <Input aria-label="hello" suffixInput={'.com'} defaultValue="Default Value" variant="filled" />
      <Input
        aria-label="hello"
        suffixInput={
          <Button size="2" corner="0">
            Connect
          </Button>
        }
        defaultValue="Default Value"
        variant="filled"
      />
    </>
  )
}

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