# Radio Button
A styled radio input that takes its size, animation speed and label classes from the Form or Fieldset around it.
## About
It is a native `` underneath, so the browser handles the one-per-group behavior. What the component adds is the styling, the linked label, and the settings it picks up from its parent.
## Example
Here is a basic example of using the Radio Button component:
```html
MaleFemale
```
## Name and Value
The `name` and `value` props are what group the radio buttons. The `name` ensures that only one radio button from the group can be selected at a time, while the `value` represents the option this radio button stands for. To read which option is selected, use the `group` prop.
```html
Credit CardPaypal
```
## Selected Option
The `group` prop holds the value of the selected radio button. Give every radio button of the group the same `name` and bind the same variable with `bind:group`. The radio button whose `value` matches the bound variable is selected, so you can also preselect an option by setting that variable.
```html
Free planPro plan
Selected plan: {plan}
```
## Radio Button Sizes
The `size` prop controls the size of the radio button, allowing flexibility for different UI layouts. Available sizes include `"sm"`, `"md"` (default), `"lg"` and `"xl"`.
```html
Small (sm) radio buttonMedium (md) radio buttonLarge (lg) radio buttonExtra Large (xl) radio button
```
## Animation
The `animationSpeed` prop defines the speed of the radio button's selection transition. This improves user interaction by adding smooth effects when selecting options. The available values are `"none"`, `"slower"`, `"slow"` `"normal"` (default), `"fast"` and `"faster"`.
Setting it to `"none"`disables animations, while other values changes the transition speed.
```html
Slower animationSlow animationNormal animationFast animationFaster animationNo animation
```
## Resetting Style
The `reset` prop removes all default styles from the Radio Button component, leaving only the applied custom styles. This is useful for complete control over styling.
```html
Option 1Option 2
```
## Disabled Radio Button
Add the native `disabled` or `readonly` attribute to prevent changes. The radio button and its label are dimmed and can't be clicked.
```html
Disabled radio button
```
## Label Position
The `labelPosition` prop controls where the label sits. It accepts `"end"` (default), which places the label after the radio button, and `"start"`, which places it before. The position follows the writing direction, so in a right-to-left layout `"start"` puts the label on the right.
```html
Label after the radio buttonLabel before the radio button
```
## Customization
The Radio Button component offers multiple ways to customize its appearance:
- `labelClasses` - Custom styles for the label. If used within a Fieldset or Form component, it inherits their `labelClasses`. The `size`, `animationSpeed` and `reset` props are inherited the same way.
- `wrapperClasses` - Additional classes for the wrapper , useful for layout adjustments.
- `class` - Apply custom styles to the radio button itself.
```html
Option 1
Option 2
```
## Accessibility
The `Radio` component uses the native ``, so screen readers announce whether it is selected. When you bind `group`, the `aria-checked` attribute reflects the selection as well. It also supports `aria-disabled` through `props` for disabled states. Each radio button is associated with a `