Textarea

import { Textarea } from "@/components/ui/textarea";

export default function TextareaDemo() {
  return <Textarea placeholder="Type your message here." />;
}

import { Textarea } from "@/components/ui/textarea";

export default function TextareaDisabled() {
  return <Textarea placeholder="Type your message here." disabled />;
}

import { styled } from "styled-system/jsx";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";

export default function TextareaWithLabel() {
  return (
    <styled.div css={{ display: "grid", w: "full", gap: "3" }}>
      <Label htmlFor="message">Your message</Label>
      <Textarea placeholder="Type your message here." id="message" />
    </styled.div>
  );
}

import { styled } from "styled-system/jsx";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";

export default function TextareaWithText() {
  return (
    <styled.div css={{ display: "grid", w: "full", gap: "3" }}>
      <Label htmlFor="message-2">Your Message</Label>
      <Textarea placeholder="Type your message here." id="message-2" />
      <styled.p css={{ textStyle: "sm", color: "muted.fg" }}>
        Your message will be copied to the support team.
      </styled.p>
    </styled.div>
  );
}

import { styled } from "styled-system/jsx";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";

export default function TextareaWithButton() {
  return (
    <styled.div css={{ display: "grid", w: "full", gap: "2" }}>
      <Textarea placeholder="Type your message here." />
      <Button>Send message</Button>
    </styled.div>
  );
}

"use client";

import { Controller, useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { styled } from "styled-system/jsx";
import { z } from "zod";
import { toast } from "@/hooks/use-toast";
import { Button } from "@/components/ui/button";
import { Field, FieldDescription, FieldError, FieldLabel } from "@/components/ui/field";
import { Textarea } from "@/components/ui/textarea";

const formSchema = z.object({
  bio: z
    .string()
    .min(10, {
      message: "Bio must be at least 10 characters.",
    })
    .max(160, {
      message: "Bio must not be longer than 30 characters.",
    }),
});

type FormSchema = z.infer<typeof formSchema>;

export default function TextareaForm() {
  const form = useForm<FormSchema>({
    resolver: zodResolver(formSchema),
  });

  const onSubmit = form.handleSubmit((data) => {
    toast({
      title: "You submitted the following values:",
      description: (
        <styled.pre
          css={{ mt: "2", w: "340px", rounded: "md", bg: "slate.950", p: "4", borderWidth: "1px" }}
        >
          <styled.code css={{ color: "white" }}>{JSON.stringify(data, null, 2)}</styled.code>
        </styled.pre>
      ),
    });
  });

  return (
    <styled.form onSubmit={onSubmit} css={{ w: "2/3", spaceY: "6" }}>
      <Controller
        control={form.control}
        name="bio"
        render={({ field, fieldState }) => (
          <Field data-invalid={fieldState.invalid}>
            <FieldLabel>Bio</FieldLabel>
            <Textarea
              placeholder="Tell us a little bit about yourself"
              css={{ resize: "none" }}
              {...field}
            />
            <FieldDescription>
              You can <span>@mention</span> other users and organizations.
            </FieldDescription>
            <FieldError>{fieldState.error?.message}</FieldError>
          </Field>
        )}
      />
      <Button type="submit">Submit</Button>
    </styled.form>
  );
}