TextArea

1import { Field } from "@ngrok/mantle/field";2import { TextArea } from "@ngrok/mantle/text-area";3 4<Field.Item name="feedback">5	<Field.Label>Default TextArea</Field.Label>6	<Field.Control>7		<TextArea placeholder="Tell us about your experience…" />8	</Field.Control>9</Field.Item>10<Field.Item name="feedback-mono">11	<Field.Label>Monospaced TextArea</Field.Label>12	<Field.Control>13		<TextArea appearance="monospaced" placeholder="Tell us about your experience…" />14	</Field.Control>15</Field.Item>16<Field.Item name="feedback-error">17	<Field.Label>Error TextArea</Field.Label>18	<Field.Control>19		<TextArea placeholder="Tell us about your experience…" validation="error" />20	</Field.Control>21</Field.Item>

1import { TextArea } from "@ngrok/mantle/text-area";2 3<TextArea aria-label="Feedback" placeholder="Tell us about your experience…" />;

1import { Button } from "@ngrok/mantle/button";2import { Field, toErrorMessages } from "@ngrok/mantle/field";3import { TextArea } from "@ngrok/mantle/text-area";4import { useForm } from "@tanstack/react-form";5import { z } from "zod";6 7const formSchema = z.object({⋯8	feedback: z.string().trim().min(1, "Please enter your feedback."),9});10function FormExample() {⋯11	const defaultValues = {⋯12		feedback: "",13	};14	const form = useForm({⋯15		defaultValues,16		validators: {⋯17			onSubmit: formSchema,18		},19		onSubmit: ({ value }) => {⋯20			// Handle form submission here21		},22	});23 24	return (25		<form⋯26			className="space-y-4"27			onSubmit={(event) => {⋯28				event.preventDefault();29				event.stopPropagation();30				void form.handleSubmit();31			}}32		>33			<form.Field name="feedback">⋯34				{(field) => (35					<Field.Item name={field.name}>⋯36						<Field.Label>Feedback</Field.Label>37						<Field.Control>⋯38							<TextArea⋯39								onBlur={field.handleBlur}40								onChange={(event) => field.handleChange(event.target.value)}41								placeholder="Tell us about your experience…"42								value={field.state.value}43							/>44						</Field.Control>45						<Field.Errors messages={toErrorMessages(field.state.meta.errors)} />46					</Field.Item>47				)}48			</form.Field>49			<Button type="submit" appearance="filled">⋯50				Submit51			</Button>52		</form>53	);54}