astro-reactive-form/packages/form/components/Label.astro
Alexander Samaniego 93a8d49f0a
feat(form): implement unique IDs (#182)
* Added Short Unique ID npm library

* Added unique ID to form-control

* Added unique ID to form-group

* Unique ID added to <form>

* Added unique IDs to control components

* Added IDs to label and fieldset

* Update Form.astro with requested changes

Co-authored-by: Ayo Ayco <ayo@ayco.io>

* Adjustments for requested changes.

Co-authored-by: Ayo Ayco <ayo@ayco.io>
2022-11-08 08:53:22 +01:00

39 lines
828 B
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.includes('validator-required');
---
{
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>