Components
- AccordionNew
- Alert
- Alert DialogNew
- AutocompleteNew
- AvatarNew
- Badge
- Breadcrumb
- Button
- CalendarNew
- CardNew
- Checkbox
- Checkbox GroupNew
- CollapsibleNew
- ComboboxNew
- CommandNew
- Context MenuNew
- Date PickerNew
- DialogNew
- DrawerNew
- EmptyNew
- FieldNew
- FieldsetNew
- FormNew
- FrameNew
- GroupNew
- Input
- Input GroupNew
- KbdNew
- Label
- MenuNew
- MeterNew
- Number Field
- OTP FieldNew
- Pagination
- PopoverNew
- Preview CardNew
- Progress
- Radio Group
- Scroll AreaNew
- Select
- Separator
- SheetNew
- SkeletonNew
- Slider
- Spinner
- StepperNew
- Switch
- Table
- TabsNew
- Textarea
- ToastNew
- ToggleNew
- Toggle GroupNew
- ToolbarNew
- Tooltip
Textarea
A native textarea element.
import { Textarea } from "mako-ui/components/textarea";
export default function Particle() {
return <Textarea placeholder="Type your message here" />;
}
Usage
import { Textarea } from "mako-ui/components/textarea"<Textarea />Field Integration
This component wraps the native <textarea> element internally, so it integrates with Field out of the box — no need to wrap it in a FieldControl manually.
<Field>
<FieldLabel>Bio</FieldLabel>
<Textarea placeholder="Tell us about yourself…" />
<FieldDescription>Write a short bio.</FieldDescription>
<FieldError>This field is required.</FieldError>
</Field>API Reference
Textarea
Styled native textarea element with custom size options.
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "default" | "lg" | number | "default" | Controls the textarea padding. Number values are passed to the native rows attribute |
unstyled | boolean | false | When true, removes all default styling |
Examples
Small Size
import { Textarea } from "mako-ui/components/textarea";
export default function Particle() {
return <Textarea placeholder="Type your message here" size="sm" />;
}
Large Size
import { Textarea } from "mako-ui/components/textarea";
export default function Particle() {
return <Textarea placeholder="Type your message here" size="lg" />;
}
Disabled
import { Textarea } from "mako-ui/components/textarea";
export default function Particle() {
return <Textarea disabled placeholder="Can't type here" />;
}
With Label
import { Label } from "mako-ui/components/label";
import { Textarea } from "mako-ui/components/textarea";
import { useId } from "react";
export default function Particle() {
const id = useId();
return (
<div className="flex flex-col items-start gap-2">
<Label htmlFor={id}>Message</Label>
<Textarea id={id} placeholder="Type your message here" />
</div>
);
}
Form Integration
"use client";
import { Button } from "mako-ui/components/button";
import { Field, FieldError, FieldLabel } from "mako-ui/components/field";
import { Form } from "mako-ui/components/form";
import { Textarea } from "mako-ui/components/textarea";
import type { FormEvent } from "react";
import { useState } from "react";
function stringValue(formData: FormData, name: string): string {
const value = formData.get(name);
return typeof value === "string" ? value : "";
}
export default function Particle() {
const [loading, setLoading] = useState(false);
const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
const formData = new FormData(e.currentTarget);
setLoading(true);
await new Promise((r) => setTimeout(r, 800));
setLoading(false);
alert(`Message: ${stringValue(formData, "message")}`);
};
return (
<Form className="flex w-full max-w-64 flex-col gap-4" onSubmit={onSubmit}>
<Field>
<FieldLabel>Message</FieldLabel>
<Textarea
name="message"
placeholder="Type your message here"
required
/>
<FieldError>This field is required.</FieldError>
</Field>
<Button loading={loading} type="submit">
Submit
</Button>
</Form>
);
}