Textarea
Multi-line text, resizable vertically.
npx shadcn add @klarhimmel/inputWhen to use
Use for
Messages and notes of a few lines or more.
Not for
One-line answers. Use Input.
Pairs with
Field, contact forms.
Preview
Tell us about allergies or late arrival.
Keep it under 500 characters.
textarea.tsx
import { Theme } from '@/components/klarhimmel/theme/style';
import { Textarea, Field } from '@/components/klarhimmel/ui/input';
export default function Example() {
return (
<Theme theme="brand">
<Field label="Message">{(p) => <Textarea {...p} />}</Field>
</Theme>
);
}Install
Import
import { Textarea } from '@/components/klarhimmel/ui/input';- Lands in
- components/klarhimmel/ui/input.tsx, plus cn() and the theme item if they are missing. Import theme.css after Tailwind.
- Render in
- Render it inside <Theme>, once near the root of your app. Tokens and fonts are scoped to it, so outside it the component is unstyled.
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
rows | number | 5 | Visible lines before it scrolls. |
...textarea | TextareaHTMLAttributes | - | Native attributes are passed through. |
className | string | - | Extra classes, merged after the component's own. |