Input() — astro Function Reference

Architecture documentation for the Input() function in Form.tsx from the astro codebase.

Function tsx CoreAstro RenderingEngine calls 1

Entity Profile

CoreAstro→ RenderingEngine→ Input() — astro Function Reference

Dependency Diagram

graph TD
  08b8f296_1046_95c9_b1e8_5b5084fb91b3["Input()"]
  6986db32_b74e_37a6_ff49_3275e975c4fb["Form.tsx"]
  08b8f296_1046_95c9_b1e8_5b5084fb91b3 -->|defined in| 6986db32_b74e_37a6_ff49_3275e975c4fb
  f245d689_6bae_60b1_cdef_b0a96204962c["useFormContext()"]
  08b8f296_1046_95c9_b1e8_5b5084fb91b3 -->|calls| f245d689_6bae_60b1_cdef_b0a96204962c
  style 08b8f296_1046_95c9_b1e8_5b5084fb91b3 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/db/test/fixtures/ticketing-example/src/components/Form.tsx lines 87–119

export function Input(inputProps: ComponentProps<'input'> & { name: string }) {
	const formContext = useFormContext();
	const fieldState = formContext.value.fields[inputProps.name];
	if (!fieldState) {
		throw new Error(
			`Input "${inputProps.name}" not found in form. Did you use the <Form> component?`
		);
	}

	const { hasErroredOnce, validationErrors, validator } = fieldState;
	return (
		<>
			<input
				onBlur={async (e) => {
					const value = e.target.value;
					if (value === '') return;
					formContext.validateField(inputProps.name, value, validator);
				}}
				onChange={async (e) => {
					if (!hasErroredOnce) return;
					const value = e.target.value;
					formContext.validateField(inputProps.name, value, validator);
				}}
				{...inputProps}
			/>
			{validationErrors?.map((e) => (
				<p className="error" key={e}>
					{e}
				</p>
			))}
		</>
	);
}