Skip to main content

Anatomy

Anatomy Image
  1. Container
  2. Input text

Default Values

Attribute Token Value
Container
Padding (Left and Right) textarea-padding-x-medium 0.5rem
Padding (Top and Bottom) textarea-padding-y-medium 0.5rem
Border Width textarea-border-width 1px
Border Radius textarea-radius 3px
Border Color textarea-color-border-default #2b659b
Background Color textarea-color-background-default #101923
Label
Font Family font-control-body-1-font-family 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif
Font Size font-control-body-1-font-size 1rem
Font Weight font-control-body-1-font-weight 400
Line Height font-control-body-1-line-height calc(20 / 16)
Letter Spacing font-control-body-1-letter-spacing 0.005em
Text Color textarea-color-text-default #ffffff

States

Default Textarea
Hover Textarea
Invalid Textarea
Disabled Textarea
Focus Textarea

Default

Attribute Token Value
Container
Border Color textarea-color-border-default #2b659b

Hover

Attribute Token Value
Container
Border Color textarea-color-border-hover #92cbff

Invalid

Attribute Token Value
Container
Border Color textarea-color-border-invalid #ff3838

Disabled

Attribute Token Value
Container
Opacity opacity-disabled 40%

Focus

Attribute Token Value
Container
Outline Offset spacing-focus-default 0.125rem
Outline color-border-focus-default #da9ce7

Sizes

Textarea Size Small
Textarea Size Medium
Textarea Size Large

Small

Attribute Token Value
Container
Padding (Left and Right) textarea-padding-x-small 0.25rem
Padding (Top and Bottom) textarea-padding-y-small 0.5rem

Medium

Attribute Token Value
Container
Padding (Left and Right) textarea-padding-x-medium 0.5rem
Padding (Top and Bottom) textarea-padding-y-medium 0.5rem

Large

Attribute Token Value
Container
Padding (Left and Right) textarea-padding-x-large 0.75rem
Padding (Top and Bottom) textarea-padding-y-large 0.5rem

Variants

Input Placeholder

Placeholder Text

Attribute Token Value
Container
Text Color textarea-color-text-placeholder #a4abb6
Feedback

Help us improve Astro

Please rate your present experience with Astro:

Cancel