radio-button.md

RadioButton

Source

A radio button that allows to select one of multiple options.

Usage

You should have the chayns-components package installed. If that is not the case already, run

yarn add chayns-components

or

npm i chayns-components

After the chayns-components package is installed, you can import the component and use it with React:

import React from 'react'
import { RadioButton } from 'chayns-components';

// ...

<RadioButton {...} />

Props

The RadioButton-component takes the following props:

Name	Type	Default	Required
id	string
name	string
checked	boolean
onChange	function
disabled	boolean	false
children	ReactNode
value	string | number | boolean
className	string
stopPropagation	boolean	false
style	{ [key: string]: string | number }

id

id?: string

The HTML id of the <input>-element.

---

name

name?: string

Multiple radio buttons with the same name belong to one group. Only one radio button in a group can be active at a time.

---

checked

checked?: boolean

Wether the radio button is currently active.

---

onChange

onChange?: function

A function that is called when the radio button gets checked. Receives the value-prop as its first argument.

---

disabled

disabled?: boolean

Disables any user interaction and renders the radio button in a disabled style.

---

children

children?: ReactNode

A string or ReactNode that will be the label.

---

value

value?: string | number | boolean

A value that will be sent to the onChange-callback as its first argument.

---

className

className?: string

A classname string that will be applied to the container element.

---

stopPropagation

stopPropagation?: boolean

Wether to stop propagation of click events to parent elements.

---

style

style?: { [key: string]: string | number }

A React style object that will be applied to the container element.