@netdata/netdata-ui
Version:
netdata UI kit
57 lines • 1.96 kB
JavaScript
import React, { useState } from "react";
import RadioButton from ".";
export var BaseRadioButton = function BaseRadioButton() {
return /*#__PURE__*/React.createElement(RadioButton, {
disabled: boolean("Disabled", false),
onChange: function onChange() {},
checked: boolean("Checked", false),
label: text("Label", "Toggle field")
});
};
export var RadioButtonDisabledAndChecked = function RadioButtonDisabledAndChecked() {
return /*#__PURE__*/React.createElement(RadioButton, {
disabled: boolean("Disabled", true),
onChange: function onChange() {},
checked: boolean("Checked", true),
label: text("Label", "Toggle field")
});
};
export var RadioButtonChecked = function RadioButtonChecked() {
return /*#__PURE__*/React.createElement(RadioButton, {
disabled: boolean("Disabled", false),
onChange: function onChange() {},
checked: boolean("Checked", true),
label: text("Label", "Toggle field")
});
};
export var ControlledRadioButtons = function ControlledRadioButtons() {
var _useState = useState("radio1"),
checked = _useState[0],
setChecked = _useState[1];
var handleChange = function handleChange(event) {
return setChecked(event.target.value);
};
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(RadioButton, {
label: "Label 1",
name: "radio-1",
onChange: handleChange,
value: "radio1",
checked: checked === "radio1"
}), /*#__PURE__*/React.createElement(RadioButton, {
label: "Label 2",
name: "radio-1",
onChange: handleChange,
value: "radio2",
checked: checked === "radio2"
}), /*#__PURE__*/React.createElement(RadioButton, {
label: "Label 3",
name: "radio-1",
onChange: handleChange,
value: "radio3",
checked: checked === "radio3",
disabled: true
}), /*#__PURE__*/React.createElement("div", null, "The value: ", checked));
};
export default {
component: RadioButton
};