@npm.tangocode/tc_ui_components/src/documentation/RadioGroup.md

[<img src="https://s3.amazonaws.com/tc-ui-components/documentationImages/tangoCodeLogo.png">](https://tangocode.com/) # TangoCode React UI Components #

## Radio Group ##

### Description ###

A customizable radio group component

### Props ###

1.  __items__ (RadioItem[]) :  An array of items for the group of radio buttons. The name will be applied to the label of the radio button. The selected property on the item will determine if the radio button is selected. The id is a unique identifier that is used for the key of the radio element.


2. __selectedId__ (string) : Is the Id of the selected radiobutton.

3. __onRadioButtonChange__ ((item: RadioItem) => void)) : Defines how many items per page are to be shown.

4. __title__ (string) : Adds a name to the group of radio buttons so when wrapped in a form element the submit will provide the key of `title`, value of the selected radio button.

5. __styles ?__ (RadioGroup.Styles) : Custom stylings that will overwrite the default styles. Must be an object of styled components with properties that match one or several of the options below.
    *   RadioWrapper is a div that wraps the label and input in a pair
    *   RadioInput is an input of type 'radio' that defines the form group behavior
    *   RadioLabel is the label that

```ts
    interface Styles {
        RadioWrapper?: <styled component>;
        RadioInput?: <styled component>;
        RadioLabel?: <styled component>;
    }
```
7. __id ?__ (string): A prefix id for all the html elements of the component

8. __name ?__ (string): A prefix name for all the html elements of the component

### Usage ### 

The following pager was created with the props:

```jsx
    <div style={{ display: "grid", gridTemplateColumns: "150px 150px" }} >
        <RadioGroup
            items={this.props.items}
            title={"title"}
            onRadioButtonChange={this.clicked}
        />
    </div>
```

*   Resulting with an inital render of:

![radio_group_1](https://s3.amazonaws.com/tc-ui-components/documentationImages/radiogroup1.png)

*   note that the div wrapping the RadioGroup determines the layout of the buttons. In this example the display grid with 2 template columns layed the buttons into 2 columns.

-   Changing the container to have a display `flex` and flex-direction `row` will lay the buttons out like so.

```jsx
    <div style={{ display: "flex", flexDirection: "row" }} >
        <RadioGroup
            items={this.props.items}
            title={"title"}
            onRadioButtonChange={this.clicked}
        />
    </div>
```

![radio_group_2](https://s3.amazonaws.com/tc-ui-components/documentationImages/radiogroup2.png)

*   Example with a title

```jsx
<div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
    <span>Title</span>
    <div style={{ display: "flex", flexDirection: "row" }}>
        <RadioGroup
            items={this.props.items}
            title={"Title"}
            onRadioButtonChange={this.clicked}
        />
    </div>
</div>
```

![radio_group_3](https://s3.amazonaws.com/tc-ui-components/documentationImages/radiogroup3.png)

### Styling ###

```jsx
const newStyles = {
    Title: styles.radiogroup.Title.extend`
        align-items: left;
        margin-left: 2px;`
    }

 render() {
        return (
            <div style={{ display: "flex", flexDirection: "row" }}>
                <RadioGroup
                    items={this.props.items}
                    title={"Title"}
                    onRadioButtonChange={this.clicked}
                    styles={newStyles}
                />
    </div>
        )
 }
```