Usage

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

<InputNumber />

Examples

Variant

Default

outline

Type

'bordered' | 'filled' | 'outline'

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

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

Corner

Default

2

Type

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

import { InputNumber, Paper } from '@pillar-ui/core'

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

Color

Default

p

Type

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

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

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

Size

Default

4

Type

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

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

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

Status

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

export const InputNumberStatus = () => {
  return (
    <>
      <InputNumber />
      <InputNumber readOnly />
      <InputNumber disabled />
      <InputNumber isInvalid />
    </>
  )
}

Step

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

export const InputNumberStep = () => {
  return (
    <>
      <InputNumber step="1" size="4" placeholder="Step 1" />
      <InputNumber step="10" placeholder="Step 10" />
      <InputNumber step=".1" size="6" placeholder="Step 0.1" />
    </>
  )
}

Max

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

export const InputNumberMax = () => {
  return (
    <>
      <InputNumber step="1" placeholder="Max value 10" max="10" />
      <InputNumber step="10" placeholder="Max value 40" max="40" />
      <InputNumber step=".1" placeholder="Max value 1" max="1" />
      <InputNumber step=".5" placeholder="Max value 10" max="10" />
    </>
  )
}

Min

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

export const InputNumberMin = () => {
  return (
    <>
      <InputNumber step="1" placeholder="Min Value 5" min="5" />
      <InputNumber step="10" placeholder="Min Value 40" min="40" />
      <InputNumber step=".1" placeholder="Min Value 1" min="1" />
      <InputNumber step=".5" placeholder="Min Value 10" min="10" />
    </>
  )
}

Prefix

KG

import { InputNumber } from '@pillar-ui/core'
import { Dimension, Dollar } from '@pillar-ui/icons'
import React from 'react'

export const InputNumberPrefix = () => {
  return (
    <>
      <InputNumber aria-label="hello" placeholder="Placeholder" />
      <InputNumber aria-label="hello" prefixInput={<Dollar width="16" />} placeholder="Placeholder" />
      <InputNumber aria-label="hello" prefixInput={'KG'} />
      <InputNumber aria-label="hello" prefixInput={<Dimension width="20" />} />
    </>
  )
}

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