astro-reactive-form/packages/form/components/controls/Input.astro

---
/**
 * DEFAULT INPUT COMPONENT
 */
import type { InputType } from '@astro-reactive/common';
import type { FormControl } from '../../core/form-control';

export interface Props {
	control: FormControl;
  readOnly?: boolean;
}

const { control, readOnly } = Astro.props;

const { validators = [] } = control;

const hasErrors: boolean = !!control.errors?.length;

const validatorAttributes: Record<string, string> = validators?.reduce((prev, validator) => {
	const split: string[] = validator.split(':');
	const label: string = `data-${split[0]}` || 'invalid';
	const value: string | null = split.length > 1 ? split[1] ?? null : 'true';

	return {
		...prev,
		[label]: value,
	};
}, {});
---

<input
	name={control.name}
	id={control.id}
	type={control.type as InputType}
	value={control.value?.toString()}
	checked={control.value === 'checked'}
	placeholder={control.placeholder}
	data-label={control.label}
	data-validator-haserrors={hasErrors.toString()}
	readonly={readOnly || null}
  disabled={(readOnly || null) && control.type === 'checkbox'}
	{...validatorAttributes}
/>