Usage

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

<Select />

Examples

Variant

Default

outline

Type

'bordered' | 'filled' | 'outline'

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

const Options = () => {
  return (
    <>
      <option value="">Option 1</option>
      <option value="">Option 2</option>
      <option value="">Option 3</option>
      <option value="">Option 4</option>
    </>
  )
}

export const SelectVariant= ()=> {
  return (
    <>
      <Select variant="filled">
        <Options />
      </Select>
      <Select variant="outline">
        <Options />
      </Select>
      <Select variant="bordered">
        <Options />
      </Select>
    </>
  )
}

Corner

Default

0

Type

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

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

const Options = () => {
  return (
    <>
      <option value="">Option 1</option>
      <option value="">Option 2</option>
      <option value="">Option 3</option>
      <option value="">Option 4</option>
    </>
  )
}

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

Size

Default

4

Type

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

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

const Options = () => {
  return (
    <>
      <option value="">Option 1</option>
      <option value="">Option 2</option>
      <option value="">Option 3</option>
      <option value="">Option 4</option>
    </>
  )
}

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

Color

Default

p

Type

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

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

const Options = () => {
  return (
    <>
      <option value="">Option 1</option>
      <option value="">Option 2</option>
      <option value="">Option 3</option>
      <option value="">Option 4</option>
    </>
  )
}

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

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