/components/input/textarea
import { textarea } from "@hedia/hexui/components/textarea";
export default {
Default,
WithLabel,
WithHelpText,
WithError,
Disabled,
};
export function Default() {
return [
textarea({
name: "message",
placeholder: "Enter your message...",
rows: 4,
}),
textarea({
name: "description",
placeholder: "Description",
rows: 6,
}),
];
}
export function WithLabel() {
return [
textarea({
id: "notes",
label: "Notes",
name: "notes",
placeholder: "Add your notes here...",
rows: 4,
}),
textarea({
id: "metadata",
label: "Metadata (JSON)",
monospace: true,
name: "metadata",
placeholder: '{ "key": "value" }',
rows: 6,
}),
];
}
export function WithHelpText() {
return [
textarea({
helpText: "A brief summary of what your app does.",
id: "description",
label: "Description",
name: "description",
placeholder: "Enter a description...",
rows: 4,
}),
textarea({
helpText: "Must be valid JSON format.",
id: "metadata",
label: "Metadata",
monospace: true,
name: "metadata",
placeholder: '{ "key": "value" }',
rows: 4,
}),
];
}
export function WithError() {
return [
textarea({
error: true,
errorText: "This field is required",
name: "message",
placeholder: "Enter your message...",
rows: 4,
}),
textarea(
{
error: true,
errorText: "Must be valid JSON",
id: "metadata",
label: "Metadata",
monospace: true,
name: "metadata",
rows: 4,
},
"{ invalid json }",
),
];
}
export function Disabled() {
return [
textarea({
disabled: true,
name: "message",
placeholder: "This field is disabled",
rows: 4,
}),
textarea(
{
disabled: true,
id: "notes",
label: "Notes",
name: "notes",
rows: 4,
},
"This content cannot be edited.",
),
];
}