Radio Button
The VKRadioButton component is a customizable and accessible radio button element built with React. It allows developers to create reusable radio buttons with added styling and functionality.
Import
To utilize the Radio button component, import it from @vivakits/react-components.
import { VKRadioButton } from "@vivakits/react-components";Variant
The variant prop defines the visual variant of the radio button. This include styles like circle square, providing flexibility in appearance.
Size
The size prop defines the size for the radio button. This prop allows for adjusting the size of the radio button to suit different design contexts, such as small, medium, or large etc. The Radio Button component comes with 6 different sizes.
Color
The color prop defines color variant for the radio button. This prop can be used to apply different color themes to the radio button, enhancing visual appeal and aligning with the application's branding. It comes with 7 different colors.
Usage Example
Selected Value: option1
API Reference
Radio Button
| Attribute | Type | Description | Default |
|---|---|---|---|
| id | string | Unique identifier for the radio button | - |
| value | stringnumber | Sets inner value when radio button is checked | - |
| selectedValue | stringnumber | Currently selected value to determine checked state | - |
| onChange | (event: React.ChangeEvent<HTMLInputElement>) => void | Handler for label click events | - |
| onLabelClick | (event: React.MouseEvent<HTMLLabelElement>) => void | Handler for label click events | - |
| variant | circlesquare | Changes Changes the shape of radio button | circle |
| size | xssmmdlgxl2xl | Changes the size of radio button | sm |
| color | primarysecondarysuccesswarningdangerdarklight | Changes the color of radio button | primary |
| className | string | Applies custom className to the radio button | - |
| labelClassName | string | Additional classes for the radio button label | - |
| wrapperClassName | string | Sets className for the wrapper around radio button | - |
| ref | React.RefObject | Attaches reference to the wrapper div | - |
| inputRef | React.RefObject | Attaches reference to the radio button | - |