The Textarea component provides a multi-line text input backed by a nativeDocumentation Index
Fetch the complete documentation index at: https://mintlify.com/Nettalco/nettalco-theme/llms.txt
Use this file to discover all available pages before exploring further.
<textarea> element. Nettalco Theme applies the same comprehensive form.field.* token delegation as InputText, so Textarea inherits identical background, border, color, padding, and focus ring treatment — ensuring visual consistency across all text-based inputs.
Usage
Design Tokens
All Textarea tokens delegate to theform.field namespace.
| Token | Value | Description |
|---|---|---|
background | {form.field.background} | Default textarea background |
disabledBackground | {form.field.disabled.background} | Background when disabled |
filledBackground | {form.field.filled.background} | Background in filled variant mode |
filledHoverBackground | {form.field.filled.hover.background} | Filled background on hover |
filledFocusBackground | {form.field.filled.focus.background} | Filled background on focus |
borderColor | {form.field.border.color} | Default border color |
hoverBorderColor | {form.field.hover.border.color} | Border color on hover |
focusBorderColor | {form.field.focus.border.color} | Border color on focus |
invalidBorderColor | {form.field.invalid.border.color} | Border color in invalid state |
color | {form.field.color} | Text color |
disabledColor | {form.field.disabled.color} | Text color when disabled |
placeholderColor | {form.field.placeholder.color} | Placeholder text color |
invalidPlaceholderColor | {form.field.invalid.placeholder.color} | Placeholder color in invalid state |
shadow | {form.field.shadow} | Box shadow |
paddingX | {form.field.padding.x} | Horizontal padding |
paddingY | {form.field.padding.y} | Vertical padding |
borderRadius | {form.field.border.radius} | Corner radius |
focusRing.width | {form.field.focus.ring.width} | Focus ring width |
focusRing.style | {form.field.focus.ring.style} | Focus ring style |
focusRing.color | {form.field.focus.ring.color} | Focus ring color |
focusRing.offset | {form.field.focus.ring.offset} | Focus ring offset |
focusRing.shadow | {form.field.focus.ring.shadow} | Focus ring shadow |
transitionDuration | {form.field.transition.duration} | Transition animation duration |
sm.fontSize | {form.field.sm.font.size} | Font size for the sm size variant |
sm.paddingX | {form.field.sm.padding.x} | Horizontal padding for sm |
sm.paddingY | {form.field.sm.padding.y} | Vertical padding for sm |
lg.fontSize | {form.field.lg.font.size} | Font size for the lg size variant |
lg.paddingX | {form.field.lg.padding.x} | Horizontal padding for lg |
lg.paddingY | {form.field.lg.padding.y} | Vertical padding for lg |
Theme Notes
Textarea uses the exact same token structure as InputText. Any theme override applied to
form.field.* tokens will affect both components simultaneously, which is intentional — multi-line inputs should look and feel like their single-line counterparts.