diff --git a/src/components/forms/controlled/inputTypes.tsx b/src/components/forms/controlled/inputTypes.tsx index b6308f327..279154bd4 100644 --- a/src/components/forms/controlled/inputTypes.tsx +++ b/src/components/forms/controlled/inputTypes.tsx @@ -67,6 +67,25 @@ export const TextArea = (props: MakeControlled) => />; }; +export const Radio = (props: MakeControlled) => { + const {data, namespace, setInput} = useFormHelpers(); + + const onChangeValue = (value: boolean | undefined) => { + props.onChangeValue?.(value); + setInput.field(props.name)(value); + }; + + const checked = data[props.name]; + useEmptyDisabledValue(props, checked, onChangeValue); + + return ; +}; + export const Checkbox = (props: MakeControlled) => { const {data, namespace, setInput} = useFormHelpers(); diff --git a/src/components/forms/uncontrolled/inputTypes.tsx b/src/components/forms/uncontrolled/inputTypes.tsx index 46dccc40b..48ccf5476 100644 --- a/src/components/forms/uncontrolled/inputTypes.tsx +++ b/src/components/forms/uncontrolled/inputTypes.tsx @@ -152,6 +152,37 @@ export const Select = ({ ; }; +/* + * radio element + */ +type RadioProps = React.ComponentPropsWithoutRef<'input'> & InputProps & { + onChangeValue?: (value: boolean | undefined) => void; + wrapperProps?: React.ComponentPropsWithoutRef<'label'>; +}; +const RadioLine = styled.div` + flex-direction: row; + display: flex; + align-items: center; +`; +export const Radio = ({ + label, + help, + wrapperProps, + onChangeValue, + ...props +}: RadioProps) => { + return + + { + onChangeValue?.(!!e.target.checked); + props.onChange?.(e); + }}/> + {label} + + + ; +}; + /* * checkbox element */