DocSpace-client/packages/components/radio-button-group
2022-07-22 22:01:25 +03:00
..
index.js Web: Moved all clients app to packages directory 2022-07-22 22:01:25 +03:00
radio-button-group.stories.js Web: Moved all clients app to packages directory 2022-07-22 22:01:25 +03:00
radio-button-group.test.js Web: Moved all clients app to packages directory 2022-07-22 22:01:25 +03:00
README.md Web: Moved all clients app to packages directory 2022-07-22 22:01:25 +03:00
styled-radio-button-group.js Web: Moved all clients app to packages directory 2022-07-22 22:01:25 +03:00

RadioButtonGroup

RadioButtonGroup allow you to add group radiobutton

Usage

import RadioButtonGroup from "@docspace/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