Documentation Playground
Skip to content
Docs

Text Area

Captures multi-line user input. 
<.text_area placeholder="Reply to comment…" />

API Reference

This component is based on the textarea element and supports common margin props.

Prop Type Default Description
class string nil
color string — Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky.
cols integer nil
disabled boolean false
high_contrast boolean — Whether to increase color contrast with the background.
m any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mb any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
ml any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mr any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mt any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mx any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
my any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
name string nil
placeholder string nil
readonly boolean false
resize string "none"
rows integer nil
size string "2"
style string ""
value string nil
variant string "surface"
class
Type string Default nil
color Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky.
Type string Default —
cols
Type integer Default nil
disabled
Type boolean Default false
high_contrast Whether to increase color contrast with the background.
Type boolean Default —
m Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mb Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
ml Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mr Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mt Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mx Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
my Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
name
Type string Default nil
placeholder
Type string Default nil
readonly
Type boolean Default false
resize
Type string Default "none"
rows
Type integer Default nil
size
Type string Default "2"
style
Type string Default ""
value
Type string Default nil
variant
Type string Default "surface"

Examples

Size

Use the size prop to control the size.

<.flex direction="column" gap="3">
  <.box max_width="200px"><.text_area size="1" placeholder="Reply to comment…" /></.box>
  <.box max_width="250px"><.text_area size="2" placeholder="Reply to comment…" /></.box>
  <.box max_width="300px"><.text_area size="3" placeholder="Reply to comment…" /></.box>
</.flex>

Variant

Use the variant prop to control the visual style.

<.flex direction="column" gap="3" max_width="250px">
  <.text_area variant="surface" placeholder="Reply to comment…" /><.text_area
    variant="classic"
    placeholder="Reply to comment…"
  /><.text_area variant="soft" placeholder="Reply to comment…" />
</.flex>

Color

Use the color prop to assign a specific accent color.

<.flex direction="column" gap="3" max_width="250px">
  <.text_area color="blue" variant="soft" placeholder="Reply to comment…" /><.text_area
    color="green"
    variant="soft"
    placeholder="Reply to comment…"
  /><.text_area color="red" variant="soft" placeholder="Reply to comment…" />
</.flex>

Resize

Use the resize prop to enable resizing on one or both axis.

<.flex direction="column" gap="3" max_width="250px">
  <.text_area resize="none" placeholder="Reply to comment…" /><.text_area
    resize="vertical"
    placeholder="Reply to comment…"
  /><.text_area resize="horizontal" placeholder="Reply to comment…" /><.text_area
    resize="both"
    placeholder="Reply to comment…"
  />
</.flex>
← Tabs Text Field →