Input Textarea
Multi-line text input fields for longer content.
Basic Textarea
HTML
<div style="max-width: 400px">
<label
style="display: block; margin-bottom: 8px; font-weight: 500"
>
Description
</label>
<textarea
class="textarea"
rows="4"
placeholder="Enter your description here..."
style="
width: 100%;
padding: 12px;
border: 1px solid var(--color_line_secondary);
border-radius: 8px;
font-family: inherit;
font-size: 14px;
resize: vertical;
box-sizing: border-box;
"
></textarea>
</div>Textarea with Character Count
Maximum 200 characters
0 / 200
HTML
<div style="max-width: 400px">
<label
style="display: block; margin-bottom: 8px; font-weight: 500"
>
Bio
</label>
<textarea
class="textarea"
rows="4"
maxlength="200"
placeholder="Tell us about yourself..."
style="
width: 100%;
padding: 12px;
border: 1px solid var(--color_line_secondary);
border-radius: 8px;
font-family: inherit;
font-size: 14px;
resize: vertical;
box-sizing: border-box;
"
></textarea>
<div
style="
display: flex;
justify-content: space-between;
margin-top: 6px;
font-size: 12px;
opacity: 0.7;
"
>
<span>Maximum 200 characters</span>
<span>0 / 200</span>
</div>
</div>Textarea Sizes
HTML
<div
style="
display: flex;
flex-direction: column;
gap: 20px;
max-width: 400px;
"
>
<!-- Small -->
<div>
<label
style="display: block; margin-bottom: 6px; font-size: 13px"
>
Small
</label>
<textarea
class="textarea textarea--small"
rows="2"
placeholder="Small textarea..."
style="
width: 100%;
padding: 8px 10px;
border: 1px solid var(--color_line_secondary);
border-radius: 6px;
font-family: inherit;
font-size: 13px;
resize: vertical;
box-sizing: border-box;
"
></textarea>
</div>
<!-- Medium -->
<div>
<label
style="display: block; margin-bottom: 6px; font-size: 14px"
>
Medium (Default)
</label>
<textarea
class="textarea"
rows="3"
placeholder="Medium textarea..."
style="
width: 100%;
padding: 12px;
border: 1px solid var(--color_line_secondary);
border-radius: 8px;
font-family: inherit;
font-size: 14px;
resize: vertical;
box-sizing: border-box;
"
></textarea>
</div>
<!-- Large -->
<div>
<label
style="display: block; margin-bottom: 6px; font-size: 15px"
>
Large
</label>
<textarea
class="textarea textarea--large"
rows="5"
placeholder="Large textarea..."
style="
width: 100%;
padding: 16px;
border: 1px solid var(--color_line_secondary);
border-radius: 10px;
font-family: inherit;
font-size: 16px;
resize: vertical;
box-sizing: border-box;
"
></textarea>
</div>
</div>Textarea States
This field is required
✓ Looks good!
HTML
<div
style="
display: flex;
flex-direction: column;
gap: 20px;
max-width: 400px;
"
>
<!-- Focus State -->
<div>
<label style="display: block; margin-bottom: 6px">
Focused
</label>
<textarea
class="textarea focus"
rows="3"
placeholder="Focused textarea..."
style="
width: 100%;
padding: 12px;
border: 2px solid var(--color_fill_primary);
border-radius: 8px;
font-family: inherit;
font-size: 14px;
resize: vertical;
box-sizing: border-box;
outline: none;
box-shadow: 0 0 0 3px
rgba(var(--color_fill_primary), 0.2);
"
></textarea>
</div>
<!-- Disabled State -->
<div>
<label
style="display: block; margin-bottom: 6px; opacity: 0.5"
>
Disabled
</label>
<textarea
class="textarea disabled"
rows="3"
disabled
placeholder="Disabled textarea..."
style="
width: 100%;
padding: 12px;
border: 1px solid var(--color_line_secondary);
border-radius: 8px;
font-family: inherit;
font-size: 14px;
resize: vertical;
box-sizing: border-box;
background: var(--color_fill_secondary);
opacity: 0.6;
cursor: not-allowed;
"
></textarea>
</div>
<!-- Error State -->
<div>
<label style="display: block; margin-bottom: 6px">Error</label>
<textarea
class="textarea error"
rows="3"
placeholder="Error textarea..."
style="
width: 100%;
padding: 12px;
border: 2px solid var(--color_state_error);
border-radius: 8px;
font-family: inherit;
font-size: 14px;
resize: vertical;
box-sizing: border-box;
"
></textarea>
<span
style="
display: block;
margin-top: 6px;
font-size: 13px;
color: var(--color_state_error);
"
>
This field is required
</span>
</div>
<!-- Success State -->
<div>
<label style="display: block; margin-bottom: 6px">
Success
</label>
<textarea
class="textarea success"
rows="3"
style="
width: 100%;
padding: 12px;
border: 2px solid var(--color_state_success);
border-radius: 8px;
font-family: inherit;
font-size: 14px;
resize: vertical;
box-sizing: border-box;
"
>
Valid content here</textarea
>
<span
style="
display: block;
margin-top: 6px;
font-size: 13px;
color: var(--color_state_success);
"
>
✓ Looks good!
</span>
</div>
</div>Resize Options
HTML
<div
style="
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
"
>
<!-- Vertical Resize -->
<div>
<label
style="display: block; margin-bottom: 6px; font-size: 13px"
>
Vertical Resize
</label>
<textarea
rows="3"
placeholder="Resize vertically..."
style="
width: 100%;
padding: 10px;
border: 1px solid var(--color_line_secondary);
border-radius: 6px;
font-family: inherit;
resize: vertical;
box-sizing: border-box;
"
></textarea>
</div>
<!-- Horizontal Resize -->
<div>
<label
style="display: block; margin-bottom: 6px; font-size: 13px"
>
Horizontal Resize
</label>
<textarea
rows="3"
placeholder="Resize horizontally..."
style="
width: 100%;
padding: 10px;
border: 1px solid var(--color_line_secondary);
border-radius: 6px;
font-family: inherit;
resize: horizontal;
box-sizing: border-box;
"
></textarea>
</div>
<!-- No Resize -->
<div>
<label
style="display: block; margin-bottom: 6px; font-size: 13px"
>
No Resize
</label>
<textarea
rows="3"
placeholder="Cannot resize..."
style="
width: 100%;
padding: 10px;
border: 1px solid var(--color_line_secondary);
border-radius: 6px;
font-family: inherit;
resize: none;
box-sizing: border-box;
"
></textarea>
</div>
</div>