// This is to move the Kobalte.ItemControl element inside the Kobalte.ItemLabel which allows the circle thing to be clickable too which is excpected via users.
// Radio Group section from file -> website/src/routes/(layout)/[framework]/guides/kobalte.mdx:
## Radio Group
For the selection of a single text value via radio buttons we use the <a href="https://kobalte.dev/docs/core/components/radio-group" target="_blank" rel="noreferrer">Radio Group</a> component of Kobalte. Add the file `RadioGroup.tsx` to your components directory and copy the following code into it:
```tsx
import { RadioGroup as Kobalte } from '@kobalte/core';
import { type JSX, Show, splitProps, For } from 'solid-js';
type RadioGroupProps = {
name: string;
label?: string | undefined;
options: { label: string; value: string }[];
value: string | undefined;
error: string;
required?: boolean | undefined;
disabled?: boolean | undefined;
ref: (element: HTMLInputElement | HTMLTextAreaElement) => void;
onInput: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, InputEvent>;
onChange: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, Event>;
onBlur: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, FocusEvent>;
};
export function RadioGroup(props: RadioGroupProps) {
const [rootProps, inputProps] = splitProps(
props,
['name', 'value', 'required', 'disabled'],
['ref', 'onInput', 'onChange', 'onBlur']
);
return (
<Kobalte.Root
{...rootProps}
validationState={props.error ? 'invalid' : 'valid'}
>
<Show when={props.label}>
<Kobalte.Label>{props.label}</Kobalte.Label>
</Show>
<div>
<For each={props.options}>
{(option) => (
<Kobalte.Item value={option.value}>
<Kobalte.ItemInput {...inputProps} />
<Kobalte.ItemLabel>
<Kobalte.ItemControl>
<Kobalte.ItemIndicator />
</Kobalte.ItemControl>
{option.label}
</Kobalte.ItemLabel>
</Kobalte.Item>
)}
</For>
</div>
<Kobalte.ErrorMessage>{props.error}</Kobalte.ErrorMessage>
</Kobalte.Root>
);
}
After adding your own styles, you can use the component together with Modular Forms as follows:
// This is to move the Kobalte.ItemControl element inside the Kobalte.ItemLabel which allows the circle thing to be clickable too which is excpected via users. // Radio Group section from file -> website/src/routes/(layout)/[framework]/guides/kobalte.mdx:
After adding your own styles, you can use the component together with Modular Forms as follows: