Amount
1 month ago
Consent
1 year ago
utils
1 year ago
Checkbox.tsx
1 year ago
Date.tsx
1 year ago
Email.tsx
1 year ago
File.tsx
1 year ago
Gateways.tsx
1 year ago
Hidden.tsx
2 years ago
Honeypot.tsx
1 year ago
MultiSelect.tsx
2 years ago
Password.tsx
2 years ago
Phone.tsx
1 year ago
Radio.tsx
2 years ago
Select.tsx
1 year ago
Text.tsx
1 year ago
TextArea.tsx
2 years ago
Url.tsx
2 years ago
Radio.tsx
48 lines
| 1 | import {SelectableFieldProps} from '@givewp/forms/propTypes'; |
| 2 | |
| 3 | export default function Radio({ |
| 4 | Label, |
| 5 | ErrorMessage, |
| 6 | options, |
| 7 | description, |
| 8 | inputProps, |
| 9 | fieldError, |
| 10 | }: SelectableFieldProps) { |
| 11 | const FieldDescription = window.givewp.form.templates.layouts.fieldDescription; |
| 12 | |
| 13 | return ( |
| 14 | options.length > 0 && ( |
| 15 | <fieldset |
| 16 | role="radiogroup" |
| 17 | aria-required={inputProps.required} |
| 18 | aria-invalid={!!fieldError} |
| 19 | aria-describedby={`givewp-field-error-${inputProps.name}`} |
| 20 | > |
| 21 | <legend> |
| 22 | <Label /> |
| 23 | {description && <FieldDescription description={description} />} |
| 24 | </legend> |
| 25 | <div className="givewp-fields-radio__options"> |
| 26 | {options.map(({value, label}, index) => { |
| 27 | const optionId = inputProps.name + '_' + index; |
| 28 | return ( |
| 29 | <div key={index} className="givewp-fields-radio__option-container"> |
| 30 | <input |
| 31 | type="radio" |
| 32 | id={optionId} |
| 33 | name={inputProps.name} |
| 34 | value={value} |
| 35 | {...inputProps} |
| 36 | /> |
| 37 | <label htmlFor={optionId}>{label}</label> |
| 38 | </div> |
| 39 | ); |
| 40 | })} |
| 41 | </div> |
| 42 | |
| 43 | <ErrorMessage /> |
| 44 | </fieldset> |
| 45 | ) |
| 46 | ); |
| 47 | } |
| 48 |