astro-reactive-form/packages/form/components/controls/RadioGroup.astro
Allan Siqueira f502e6ca24
feat(form): readOnly flag (#166)
* feat: add readOnly flag on form

* fix: resolve PR coments

* fix: add flag disabled to fields that dont have effect on readonly attr
2022-10-31 17:27:43 +01:00

39 lines
715 B
Text

---
/**
* RADIO GROUP COMPONENT
*/
import type { Radio, ControlOption } from '@astro-reactive/common';
export interface Props {
control: Radio;
readOnly?: boolean;
}
const { control, readOnly = false } = Astro.props;
const options = control.options.map((option: string | ControlOption) => {
if (typeof option === 'string') {
return {
label: option,
value: option,
};
}
return option;
});
---
{
options.map((option: ControlOption) => (
<div class="radio-option">
<input
type="radio"
name={control.name}
value={option.value}
checked={option.value === control.value}
readonly={readOnly || null}
disabled={readOnly || null}
/>{' '}
{option.label}
</div>
))
}