Usage

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

<InputFile />

Examples

Variant

Default

outline

Type

'bordered' | 'filled' | 'outline'

Select FileNo file Choose

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

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

Corner

Default

2

Type

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

Select FileNo file Choose

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

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

Color

Default

p

Type

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

Select FileNo file Choose

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

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

Size

Default

4

Type

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

Select FileNo file Choose

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

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

Status

Select FileNo file Choose

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

export const InputFileStatus = () => {
  return (
    <>
      <InputFile />
      <InputFile readOnly />
      <InputFile disabled />
      <InputFile isInvalid />
    </>
  )
}

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