Textarea

Displays a resizable form textarea. 

<Textarea placeholder="Type your message here." />

Installation

uvx --from basic-components components add textarea
pipx run --spec basic-components components add textarea
pip install basic-components && components add textarea
  • Copy Textarea components below to your local environment
  • Place them in the components/ui/textarea directory in your project
  • Configure your jinja environment for JinjaX
  • Add the cn() helper function to your global jinja environment

Usage

<Textarea placeholder="Type your message here." />

Attributes

Prop Type Default Description
className String "" Additional CSS classes for customization.
value String "" The value of the textarea
placeholder String "" Placeholder text displayed in the textarea.
disabled bool "" Disables the textarea

Code

{#def
    className: str = "",
    value: str = "",
    size: str = "min-h-[80px] w-full",
    placeholder: str = "",
    disabled: bool = False,
    required: bool = False,
    error: bool = False,
#}
{% macro error_classes() %}
  {%- if error -%}
    border-red-600 dark:border-red-300 ring-red-600 dark:ring-red-300
  {%- else -%}
    border-zinc-200 dark:border-zinc-800
  {%- endif -%}
{% endmacro %}


<textarea
    {% if required %}required{% endif %}
    class="{{ className }} flex {{ size }} rounded-md border bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-zinc-950 placeholder:text-zinc-500 outline-none focus:outline-none focus:border-zinc-950 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-zinc-950 dark:ring-offset-zinc-950 dark:file:text-zinc-50 dark:placeholder:text-zinc-400 dark:focus-visible:ring-zinc-300 dark:focus:border-zinc-300 {{ error_classes() }}"
    {% if disabled %}disabled{% endif %}
    placeholder="{{ placeholder }}"
    {% if disabled %}disabled{% endif %}
    {{ attrs.render() }}
>
{{ value }}</textarea>

Examples

Disabled

<Textarea disabled placeholder="This one is disabled." />

With Label

<div class="grid w-full gap-1.5">
  <Label htmlFor="message">Your Message</Label>
  <Textarea placeholder="Type your message here." id="message" />
</div>

With Text

Your message will be copied to the support team. 

<div class="grid w-full gap-1.5">
  <Label htmlFor="message-2">Your Message</Label>
  <Textarea placeholder="Type your message here." id="message-2" />
  <p class="text-sm text-muted-foreground">
    Your message will be copied to the support team.
  </p>
</div>

With Button

<div class="grid w-full gap-2">
  <Textarea placeholder="Type your message here." />
  <Button>Send message</Button>
</div>

With Form

You can @mention other users and organizations.

<Form method="GET" action="">
    <FormItem>
      <FormLabel htmlFor="bio">Bio</FormLabel>
      <Textarea
          id="bio"
          placeholder="Tell us a little bit about yourself"
          className="resize-none"/>
      <FormDescription>You can @mention other users and organizations.</FormDescription>
    </FormItem>
    <Button type="submit">Submit</Button>
  </Form>