diff --git a/packages/lsd-react/src/components/RadioButton/RadioButton.stories.tsx b/packages/lsd-react/src/components/RadioButton/RadioButton.stories.tsx index c27a36c..2a9d446 100644 --- a/packages/lsd-react/src/components/RadioButton/RadioButton.stories.tsx +++ b/packages/lsd-react/src/components/RadioButton/RadioButton.stories.tsx @@ -24,4 +24,5 @@ Root.args = { disabled: false, checked: undefined, onChange: undefined, + value: '1', } diff --git a/packages/lsd-react/src/components/RadioButton/RadioButton.tsx b/packages/lsd-react/src/components/RadioButton/RadioButton.tsx index a547e68..ed49ac2 100644 --- a/packages/lsd-react/src/components/RadioButton/RadioButton.tsx +++ b/packages/lsd-react/src/components/RadioButton/RadioButton.tsx @@ -17,7 +17,7 @@ export type RadioButtonProps = Omit< disabled?: boolean size?: 'small' | 'medium' | 'large' name?: string - value?: string + value: string inputProps?: React.InputHTMLAttributes } @@ -29,15 +29,18 @@ export const RadioButton: React.FC & { checked: _checked, defaultChecked, disabled = false, + value, inputProps = {}, children, ...props }) => { const ref = useRef(null) + const radioButtonGroup = useRadioButtonGroupContext() const size = radioButtonGroup?.size ?? _size + const name = radioButtonGroup?.name ?? '' const selected = radioButtonGroup - ? radioButtonGroup.value === inputProps?.value + ? radioButtonGroup.value === value : _checked const input = useInput({ @@ -49,7 +52,7 @@ export const RadioButton: React.FC & { const handleChange = (event: React.ChangeEvent) => { radioButtonGroup - ? radioButtonGroup.setActiveValue(event.target.value) + ? radioButtonGroup.setActiveRadioButton(event.target.value) : input.onChange(event) } @@ -69,6 +72,8 @@ export const RadioButton: React.FC & { > void + name?: string | null + setActiveRadioButton: (value: ActiveRadioButtonType) => void size?: RadioButtonGroupProps['size'] } diff --git a/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.stories.tsx b/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.stories.tsx index 2225f95..4bde163 100644 --- a/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.stories.tsx +++ b/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.stories.tsx @@ -17,31 +17,15 @@ export default { } as Meta export const Root: Story = (args) => ( - - - RadioButton label - - - RadioButton label - - - RadioButton label - - - RadioButton label - - - RadioButton label - - - RadioButton label - - - RadioButton label - - - RadioButton label - + + RadioButton label + RadioButton label + RadioButton label + RadioButton label + RadioButton label + RadioButton label + RadioButton label + RadioButton label ) diff --git a/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.tsx b/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.tsx index 505f2e2..57913e3 100644 --- a/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.tsx +++ b/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.tsx @@ -7,8 +7,8 @@ import { Typography } from '../Typography' export type ActiveRadioButtonType = string | readonly string[] export type RadioButtonGroupProps = React.HTMLAttributes & { - value?: ActiveRadioButtonType | null - name?: ActiveRadioButtonType | null + value: ActiveRadioButtonType | null + name?: string | null onChange?: (value: ActiveRadioButtonType) => void size?: 'small' | 'medium' | 'large' label?: string @@ -29,7 +29,7 @@ export const RadioButtonGroup: React.FC & { return (