astro-reactive-form/packages/form/components/controls/RadioGroup.astro
Ayo Ayco a0a20c33b2
feat(form): add index to radio group item id (#193)
* feat(form): add index to radio group item id

* feat(form): radio-option label for prop

* fe-test(form): update tests for radio group
2022-11-12 07:57:31 +01:00

40 lines
805 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, index: number) => (
<div class="radio-option">
<input
type="radio"
id={control.id + '-' + index}
name={control.name}
value={option.value}
checked={option.value === control.value}
readonly={readOnly || null}
disabled={readOnly || null}
/>
<label for={control.id + '-' + index}>{option.label}</label>
</div>
))
}