RadioButtonGroup
RadioButtonGroup allow you to add group radiobutton
Usage
import RadioButtonGroup from "@appserver/components/radio-button-group";
<RadioButtonGroup
name="fruits"
selected="banana"
options={[
{ value: "apple", label: "Sweet apple" },
{ value: "banana", label: "Banana" },
{ value: "Mandarin" },
]}
/>
Properties
Props |
Type |
Required |
Values |
Default |
Description |
className |
string |
- |
- |
- |
Accepts class |
id |
string |
- |
- |
- |
Accepts id |
isDisabled |
bool |
- |
- |
false |
Disabling all radiobutton in group |
name |
string |
✅ |
- |
- |
Used as HTML name property for <input> tag. Used for identification RadioButtonGroup |
onClick |
func |
- |
- |
- |
Allow you to handle clicking events on <RadioButton /> component |
options |
arrayOf |
✅ |
- |
- |
Array of objects, contains props for each <RadioButton /> component |
orientation |
oneOf |
- |
vertical , horizontal |
horizontal |
Position of radiobuttons |
selected |
string |
✅ |
- |
- |
Value of the selected radiobutton |
spacing |
string |
- |
- |
15px |
Margin between radiobutton. If orientation horizontal , it is margin-left (apply for all radiobuttons, except first), if orientation vertical , it is margin-bottom (apply for all radiobuttons, except last) |
style |
obj , array |
- |
- |
- |
Accepts css style |
width |
string |
- |
- |
100% |
Width of RadioButtonGroup container |
fontSize |
string |
- |
- |
- |
Font size of link |
fontWeight |
number, string |
- |
- |
- |
Font weight of link |