Textarea

several lines of text, growing as you type.

usage

scenario

example

code

import { Textarea } from 'charcell/react';

export function TextareaExample() {
  return <Textarea placeholder="warning: do not" aria-label="sign" />;
}

<script setup lang="ts">
import { Textarea } from 'charcell/vue';
</script>

<template>
  <Textarea placeholder="warning: do not" aria-label="sign" />
</template>

<script lang="ts">
  import { Textarea } from 'charcell/svelte';
</script>

<Textarea placeholder="warning: do not" aria-label="sign" />

<textarea
  class="CharcellTextarea CharcellTextarea--boxed CharcellTextarea--autosize"
  placeholder="warning: do not"
  aria-label="sign"
  rows="3"
></textarea>

import { useState } from 'react';
import { Textarea } from 'charcell/react';

export function TextareaExample() {
  const [value, setValue] = useState(
    'warning: do not play in or around dumpster.\ndo not kick dumpster.\ndo not sleep in dumpster.\nusage of this container for disposal of human remains may be a violation of local health ordinances.',
  );

  return (
    <Textarea
      value={value}
      onValueChange={setValue}
      placeholder="warning: do not"
      aria-label="sign"
    />
  );
}

<script setup lang="ts">
import { ref } from 'vue';
import { Textarea } from 'charcell/vue';

const value = ref(
  'warning: do not play in or around dumpster.\ndo not kick dumpster.\ndo not sleep in dumpster.\nusage of this container for disposal of human remains may be a violation of local health ordinances.',
);
</script>

<template>
  <Textarea v-model="value" placeholder="warning: do not" aria-label="sign" />
</template>

<script lang="ts">
  import { Textarea } from 'charcell/svelte';

  let value = $state(
    'warning: do not play in or around dumpster.\ndo not kick dumpster.\ndo not sleep in dumpster.\nusage of this container for disposal of human remains may be a violation of local health ordinances.',
  );
</script>

<Textarea bind:value placeholder="warning: do not" aria-label="sign" />

<textarea
  class="CharcellTextarea CharcellTextarea--boxed CharcellTextarea--autosize"
  placeholder="warning: do not"
  aria-label="sign"
  rows="3"
>
warning: do not play in or around dumpster.
do not kick dumpster.
do not sleep in dumpster.
usage of this container for disposal of human remains may be a violation of local health ordinances.</textarea>

import { useState } from 'react';
import { Textarea } from 'charcell/react';

export function TextareaExample() {
  const [value, setValue] = useState(
    'warning: do not play in or around dumpster.\ndo not kick dumpster.\ndo not sleep in dumpster.\nusage of this container for disposal of human remains may be a violation of local health ordinances.',
  );

  return (
    <Textarea
      value={value}
      onValueChange={setValue}
      autosize={false}
      placeholder="warning: do not"
      aria-label="sign"
    />
  );
}

<script setup lang="ts">
import { ref } from 'vue';
import { Textarea } from 'charcell/vue';

const value = ref(
  'warning: do not play in or around dumpster.\ndo not kick dumpster.\ndo not sleep in dumpster.\nusage of this container for disposal of human remains may be a violation of local health ordinances.',
);
</script>

<template>
  <Textarea
    v-model="value"
    :autosize="false"
    placeholder="warning: do not"
    aria-label="sign"
  />
</template>

<script lang="ts">
  import { Textarea } from 'charcell/svelte';

  let value = $state(
    'warning: do not play in or around dumpster.\ndo not kick dumpster.\ndo not sleep in dumpster.\nusage of this container for disposal of human remains may be a violation of local health ordinances.',
  );
</script>

<Textarea
  bind:value
  autosize={false}
  placeholder="warning: do not"
  aria-label="sign"
/>

<textarea
  class="CharcellTextarea CharcellTextarea--boxed"
  placeholder="warning: do not"
  aria-label="sign"
  rows="3"
>
warning: do not play in or around dumpster.
do not kick dumpster.
do not sleep in dumpster.
usage of this container for disposal of human remains may be a violation of local health ordinances.</textarea>

import { useState } from 'react';
import { Textarea } from 'charcell/react';

export function TextareaExample() {
  const [value, setValue] = useState('do not kick dumpster.');

  return (
    <Textarea
      value={value}
      onValueChange={setValue}
      placeholder="warning: do not"
      aria-label="sign"
      disabled
    />
  );
}

<script setup lang="ts">
import { ref } from 'vue';
import { Textarea } from 'charcell/vue';

const value = ref('do not kick dumpster.');
</script>

<template>
  <Textarea
    v-model="value"
    placeholder="warning: do not"
    aria-label="sign"
    disabled
  />
</template>

<script lang="ts">
  import { Textarea } from 'charcell/svelte';

  let value = $state('do not kick dumpster.');
</script>

<Textarea bind:value placeholder="warning: do not" aria-label="sign" disabled />

<textarea
  class="CharcellTextarea CharcellTextarea--boxed CharcellTextarea--autosize"
  placeholder="warning: do not"
  aria-label="sign"
  disabled
  rows="3"
>
do not kick dumpster.</textarea>

import { Textarea } from 'charcell/react';

export function TextareaExample() {
  return (
    <Textarea variant="dense" placeholder="warning: do not" aria-label="sign" />
  );
}

<script setup lang="ts">
import { Textarea } from 'charcell/vue';
</script>

<template>
  <Textarea variant="dense" placeholder="warning: do not" aria-label="sign" />
</template>

<script lang="ts">
  import { Textarea } from 'charcell/svelte';
</script>

<Textarea variant="dense" placeholder="warning: do not" aria-label="sign" />

<textarea
  class="CharcellTextarea CharcellTextarea--dense CharcellTextarea--autosize"
  placeholder="warning: do not"
  aria-label="sign"
  rows="3"
></textarea>

import { Textarea } from 'charcell/react';

export function TextareaExample() {
  return (
    <Textarea border="none" placeholder="warning: do not" aria-label="sign" />
  );
}

<script setup lang="ts">
import { Textarea } from 'charcell/vue';
</script>

<template>
  <Textarea border="none" placeholder="warning: do not" aria-label="sign" />
</template>

<script lang="ts">
  import { Textarea } from 'charcell/svelte';
</script>

<Textarea border="none" placeholder="warning: do not" aria-label="sign" />

<textarea
  class="CharcellTextarea CharcellTextarea--border-top-none CharcellTextarea--border-end-none CharcellTextarea--border-bottom-none CharcellTextarea--border-start-none CharcellTextarea--boxed CharcellTextarea--autosize"
  placeholder="warning: do not"
  aria-label="sign"
  rows="3"
></textarea>

import { Textarea } from 'charcell/react';

export function TextareaExample() {
  return (
    <Textarea
      border="rounded"
      placeholder="warning: do not"
      aria-label="sign"
    />
  );
}

<script setup lang="ts">
import { Textarea } from 'charcell/vue';
</script>

<template>
  <Textarea border="rounded" placeholder="warning: do not" aria-label="sign" />
</template>

<script lang="ts">
  import { Textarea } from 'charcell/svelte';
</script>

<Textarea border="rounded" placeholder="warning: do not" aria-label="sign" />

<textarea
  class="CharcellTextarea CharcellTextarea--border-top-rounded CharcellTextarea--border-end-rounded CharcellTextarea--border-bottom-rounded CharcellTextarea--border-start-rounded CharcellTextarea--boxed CharcellTextarea--autosize"
  placeholder="warning: do not"
  aria-label="sign"
  rows="3"
></textarea>

import { Textarea } from 'charcell/react';

export function TextareaExample() {
  return (
    <Textarea border="heavy" placeholder="warning: do not" aria-label="sign" />
  );
}

<script setup lang="ts">
import { Textarea } from 'charcell/vue';
</script>

<template>
  <Textarea border="heavy" placeholder="warning: do not" aria-label="sign" />
</template>

<script lang="ts">
  import { Textarea } from 'charcell/svelte';
</script>

<Textarea border="heavy" placeholder="warning: do not" aria-label="sign" />

<textarea
  class="CharcellTextarea CharcellTextarea--border-top-heavy CharcellTextarea--border-end-heavy CharcellTextarea--border-bottom-heavy CharcellTextarea--border-start-heavy CharcellTextarea--boxed CharcellTextarea--autosize"
  placeholder="warning: do not"
  aria-label="sign"
  rows="3"
></textarea>

import { Textarea } from 'charcell/react';

export function TextareaExample() {
  return (
    <Textarea border="double" placeholder="warning: do not" aria-label="sign" />
  );
}

<script setup lang="ts">
import { Textarea } from 'charcell/vue';
</script>

<template>
  <Textarea border="double" placeholder="warning: do not" aria-label="sign" />
</template>

<script lang="ts">
  import { Textarea } from 'charcell/svelte';
</script>

<Textarea border="double" placeholder="warning: do not" aria-label="sign" />

<textarea
  class="CharcellTextarea CharcellTextarea--border-top-double CharcellTextarea--border-end-double CharcellTextarea--border-bottom-double CharcellTextarea--border-start-double CharcellTextarea--boxed CharcellTextarea--autosize"
  placeholder="warning: do not"
  aria-label="sign"
  rows="3"
></textarea>

as text

at rest

┌──────────────────────┐
│ warning: do not      │
│                      │
│                      │
└──────────────────────┘

hover

┌──────────────────────┐
│ warning: do not      │
│                      │
│                      │
└──────────────────────┘

props

valuestring: The text, held by the consumer; pair it with onValueChange.; binds with v-model:value in vue, bind:value in svelte
onValueChange(value: string) => void: Called with the text on every change.
defaultValuestring: The text to start with, uncontrolled: the field owns it from there.
variant'boxed' | 'dense'= 'boxed': boxed draws the ring around the field; dense is a bare faint strip.
border'none' | 'single' | 'rounded' | 'heavy' | 'double': The style of every side of the boxed field's ring: single, rounded, heavy, double or none.
borderX'none' | 'single' | 'rounded' | 'heavy' | 'double': The style of the boxed field's ring's start and end sides, over border.
borderY'none' | 'single' | 'rounded' | 'heavy' | 'double': The style of the boxed field's ring's top and bottom sides, over border.
borderTop'none' | 'single' | 'rounded' | 'heavy' | 'double': The style of the boxed field's ring's top side, over borderY and border.
borderEnd'none' | 'single' | 'rounded' | 'heavy' | 'double': The style of the boxed field's ring's end side, over borderX and border.
borderBottom'none' | 'single' | 'rounded' | 'heavy' | 'double': The style of the boxed field's ring's bottom side, over borderY and border.
borderStart'none' | 'single' | 'rounded' | 'heavy' | 'double': The style of the boxed field's ring's start side, over borderX and border.
rowsnumber= 3: The height in rows of text; with autosize, the least height.
autosizeboolean= true: The field grows with its content.

it also takes any other attribute of its <textarea>.