@rocketsofawesome/mirage
Version:
[Live Demo of the Pattern Library](https://rocketsofawesome.github.io/mirage/)
35 lines (34 loc) • 1.35 kB
Markdown
```js
<RectangularRadioButton name='gender' value='4' shape='rectangle'>4</RectangularRadioButton>
```
## Checked
```js
<RectangularRadioButton name='gender' value='5' shape='rectangle' defaultChecked >5</RectangularRadioButton>
```
## With Helper Text
```js
<RectangularRadioButton name='gender' value='6' shape='rectangle'>
<P align='center' fontSize='2rem'>6</P>
<P align='center'>This is my helper text</P>
</RectangularRadioButton>
```
## With Error
```js
<RectangularRadioButton name='gender' value='7' shape='rectangle' error='This field is invalid' >7</RectangularRadioButton>
```
## Square
```js
<div style={{display: 'flex', gap: '1rem'}}>
<RectangularRadioButton name='squareGender' value='8' shape='square'>8</RectangularRadioButton>
<RectangularRadioButton name='squareGender' value='9' shape='square'>9</RectangularRadioButton>
<RectangularRadioButton name='squareGender' value='10' shape='square'>10</RectangularRadioButton>
</div>
```
## Circular
```js
<div style={{display: 'flex', gap: '1rem'}}>
<RectangularRadioButton name='circleGender' value='11' shape='circle'>11</RectangularRadioButton>
<RectangularRadioButton name='circleGender' value='12' shape='circle'>12</RectangularRadioButton>
<RectangularRadioButton name='circleGender' value='13' shape='circle'>13</RectangularRadioButton>
</div>
```