Radio Cards
The RadioCards component combines the functionality of radio buttons with the visual appeal of cards, allowing users to select a single option from a set of choices presented as cards. Each card acts as a radio button.
Installation
Install the package
npm i @start-base/react-form-elementsAdd the styles
To use the React form elements styles in a Next.js project, import the styles in your layout.tsx file.
app/layout.tsx
import "@start-base/react-form-elements/styles.css";Import the component
import RadioGroup from '@start-base/react-form-elements/RadioGroup';Usages
Radio Cards Component Checked
Radio Cards Component Row
Radio Cards Component With Input
Radio Cards Component Disabled
Radio Cards Component Error
API
A card-style radio group component for enhanced visual presentation.
| Name | Type | Default | Description |
|---|---|---|---|
| name | string | Name of the input | |
| label | string | null | Label of the input |
| value | string or number | Value of the input | |
| onChange | function | Callback function that is fired when the value changes. | |
| inputClassName | string | null | Classname for input element |
| labelClassName | string | null | Classname for label element |
| errorClassName | string | null | Classname for error element |
| disabled | boolean | false | Disable the input |
| error | string or boolean or object | null | Error message to display below the input. if value is a boolean input border will be change. Also you can pass schema validator error objects. |
| options | array | [] | Array of options to display |
| optionLabelClassName | string | null | Classname for option label |
| cardClassName | string | null | Classname for option card |
| direction | string | column | Options direction column or row |
| hideInput | boolean | true | Input hide option |