Usage

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

<Textarea />

Examples

Variant

Default

outline

Type

'bordered' | 'filled' | 'outline'

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

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

Corner

Default

0

Type

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

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

export const TextareaCorner = () => {
  return (
    <>
      <Textarea corner="0" placeholder="sharp" />
      <Textarea corner="1" placeholder="3" />
      <Textarea corner="2" placeholder="sm" />
      <Textarea corner="3" placeholder="md" />
      <Textarea corner="4" placeholder="lg" />
      <Textarea corner="5" placeholder="xl" />
      <Textarea corner="full" placeholder="full" />
    </>
  )
}

Color

Default

p

Type

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

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

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

Size

Default

4

Type

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

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

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

Prefix

https://

import { Textarea } from '@pillar-ui/core'
import { User } from '@pillar-ui/icons'
import React from 'react'

export const TextareaPrefix = () => {
  return (
    <>
      <Textarea aria-label="hello" placeholder="Placeholder" />
      <Textarea aria-label="hello" prefixInput={<User width="16" />} placeholder="Placeholder" />
      <Textarea aria-label="hello" prefixInput={'https://'} />
    </>
  )
}

Suffix

.com

import { Textarea } from '@pillar-ui/core'
import { User } from '@pillar-ui/icons'
import React from 'react'

export const TextareaSuffix = () => {
  return (
    <>
      <Textarea aria-label="hello" suffixInput={<User width="16" />} placeholder="Placeholder" />
      <Textarea aria-label="hello" suffixInput=".com" />
    </>
  )
}

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