Textarea
Multi-line text field for longer input.
Selectors
textarea- Auto-styled textarea within .cider scope. Includes hover, focus ring, disabled, and error states.
Default
<textarea rows="3" placeholder="Type your message..."></textarea>Required
<label for="bio-req">Bio</label>
<textarea id="bio-req" rows="3" placeholder="Tell us about yourself" required></textarea>Invalid
<label for="msg-err">Message</label>
<textarea id="msg-err" rows="3" placeholder="Type your message..." aria-invalid="true" aria-describedby="msg-err-msg"></textarea>
<small id="msg-err-msg">Message is required.</small>Disabled
<textarea rows="3" placeholder="Type your message..." disabled></textarea>With Label
<label class="grid gap-1.5">Message
<textarea rows="3" placeholder="Type your message..."></textarea>
</label>Form
<form class="flex flex-col gap-4" onsubmit="return false">
<label class="space-y-1.5">Bio
<textarea rows="3" placeholder="Tell us a bit about yourself"></textarea>
<small>You can @mention other users and organizations.</small>
</label>
<button class="btn-gray" type="submit">Submit</button>
</form>