TextArea

Solidtype_heroui.Text_area is a <textarea> with the classes HeroUI’s own textAreaVariants gives and the state its styles read, as Input’s are. It takes every attribute a <textarea> takes and passes them on. Inside a TextField it is Kobalte’s TextField.TextArea.

Usage

text_area_usage.mlx

module Text_area = Solidtype_heroui.Text_area

let make () =
  <Text_area class_="w-64" placeholder="Write a message" aria_label="Message" />

Examples

Variants

text_area_variants.mlx

module Text_area = Solidtype_heroui.Text_area

let make () =
  <div class_="flex w-64 flex-col gap-4">
    <Text_area placeholder="Primary" aria_label="Primary" variant=`primary />
    <Text_area placeholder="Secondary" aria_label="Secondary" variant=`secondary
    />
  </div>

Rows and Resizing

text_area_rows.mlx

module Text_area = Solidtype_heroui.Text_area

let make () =
  <div class_="flex w-64 flex-col gap-4">
    <Text_area rows="2" placeholder="Two rows" aria_label="Two rows" />
    <Text_area
      rows="6"
      class_="resize-none"
      placeholder="Six rows, fixed"
      aria_label="Six rows"
    />
  </div>

Styling Reference

CSS Classes

• .textarea, and .textarea--primary, .textarea--secondary, .textarea--full-width

Interactive States

• Hover: :hover or [data-hovered="true"]
• Focus Visible: :focus-visible or [data-focus-visible="true"]
• Invalid: [data-invalid="true"]
• Disabled: :disabled or [data-disabled="true"]

API Reference

TextArea takes every attribute a <textarea> takes, and:

React	solidtype	Type	Default	Description
variant	variant	[ `primary | `secondary ]	`primary, or its field’s	Its look
fullWidth	full_width	bool	false	Whether it takes its container’s width
className	class_	string		Added after HeroUI’s classes

Beside React

Original HeroUI documentation: TextArea.