astro-reactive-form/packages/form/components/Label.astro

45 lines
1 KiB
Text

---
import type { FormControl } from '../core';
export interface Props {
control: FormControl;
showValidationHints: boolean;
showErrors?: boolean; // feature flag for showing validation errors
}
const { control, showValidationHints } = Astro.props;
const { validators = [] } = control;
const isRequired: boolean =
showValidationHints &&
validators.some((validator) => {
if (typeof validator === 'string' && validator == 'validator-required') return true;
if (typeof validator === 'object' && validator.validator == 'validator-required') return true;
return false;
});
---
{
control.label && control.type !== 'checkbox' && (
<label for={control.id} data-validation-required={isRequired ? 'true' : null}>
{control.label}
</label>
)
}
<slot />
{
control.label && control.type === 'checkbox' && (
<label for={control.id} data-validation-required={isRequired ? 'true' : null}>
{control.label}
</label>
)
}
<style>
label[data-validation-required='true']::before {
content: '*';
}
</style>