How to use the grommet.CheckBox function in grommet

To help you get started, we’ve selected a few grommet examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github grommet / grommet / components / Form / form.stories.js View on Github external
}), _react["default"].createElement(_grommet.FormField, {
    label: "Email",
    name: "email",
    type: "email",
    required: true
  }), _react["default"].createElement(_grommet.FormField, {
    label: "Employee ID",
    name: "employeeId",
    required: true,
    validate: {
      regexp: /^[0-9]{4,6}$/,
      message: '4-6 digits'
    }
  }), _react["default"].createElement(_grommet.FormField, {
    name: "subscribe",
    component: _grommet.CheckBox,
    pad: true,
    label: "Subscribe?"
  }), _react["default"].createElement(_grommet.FormField, {
    name: "ampm",
    component: _grommet.RadioButtonGroup,
    pad: true,
    options: ['morning', 'evening']
  }), _react["default"].createElement(_grommet.FormField, {
    label: "Size",
    name: "size",
    component: _grommet.Select,
    onChange: function onChange(event) {
      return console.log(event);
    },
    options: ['small', 'medium', 'large', 'xlarge']
  }), _react["default"].createElement(_grommet.FormField, {
github grommet / grommet / components / Form / stories / Submit.js View on Github external
}), _react["default"].createElement(_grommet.FormField, {
    label: "Email",
    name: "email",
    type: "email",
    required: true
  }), _react["default"].createElement(_grommet.FormField, {
    label: "Employee ID",
    name: "employeeId",
    required: true,
    validate: {
      regexp: /^[0-9]{4,6}$/,
      message: '4-6 digits'
    }
  }), _react["default"].createElement(_grommet.FormField, {
    name: "subscribe",
    component: _grommet.CheckBox,
    pad: true,
    label: "Subscribe?"
  }), _react["default"].createElement(_grommet.FormField, {
    name: "ampm",
    component: _grommet.RadioButtonGroup,
    pad: true,
    options: ['morning', 'evening']
  }), _react["default"].createElement(_grommet.FormField, {
    label: "Size",
    name: "size",
    component: _grommet.Select,
    onChange: function onChange(event) {
      return console.log(event);
    },
    options: ['small', 'medium', 'large', 'xlarge']
  }), _react["default"].createElement(_grommet.FormField, {
github grommet / grommet / components / CheckBox / stories / Indeterminate.js View on Github external
}), checkboxes.map(function (item) {
    return _react["default"].createElement(_grommet.CheckBox, {
      key: item,
      checked: checked.includes(item),
      label: item,
      onChange: function onChange(e) {
        return onCheck(e, item);
      }
    });
  }))));
};
github grommet / grommet / components / Select / stories / ManyOptions.js View on Github external
_proto.render = function render() {
    var _this$props = this.props,
        value = _this$props.value,
        selected = _this$props.selected;
    return _react["default"].createElement(_grommet.Box, {
      direction: "row",
      gap: "small",
      align: "center",
      pad: "xsmall"
    }, _react["default"].createElement(_grommet.CheckBox, {
      tabIndex: "-1",
      checked: selected,
      onChange: function onChange() {}
    }), value);
  };
github grommet / grommet / components / Form / stories / Toggle.js View on Github external
var FormFieldToggle = function FormFieldToggle(props) {
  return _react["default"].createElement(_grommet.Grommet, {
    theme: _grommet.grommet
  }, _react["default"].createElement(_grommet.Box, {
    align: "center",
    pad: "large"
  }, _react["default"].createElement(_grommet.FormField, _extends({
    label: "Label",
    htmlFor: "check-box"
  }, props), _react["default"].createElement(_grommet.Box, {
    pad: {
      horizontal: 'small',
      vertical: 'xsmall'
    }
  }, _react["default"].createElement(_grommet.CheckBox, {
    id: "check-box",
    label: "CheckBox",
    toggle: true
  })))));
};
github grommet / grommet / components / Form / stories / CheckBox.js View on Github external
var FormFieldCheckBox = function FormFieldCheckBox(props) {
  return _react["default"].createElement(_grommet.Grommet, {
    theme: _grommet.grommet
  }, _react["default"].createElement(_grommet.Box, {
    align: "center",
    pad: "large"
  }, _react["default"].createElement(_grommet.FormField, _extends({
    label: "Label",
    htmlFor: "check-box"
  }, props), _react["default"].createElement(_grommet.Box, {
    pad: {
      horizontal: 'small',
      vertical: 'xsmall'
    }
  }, _react["default"].createElement(_grommet.CheckBox, {
    id: "check-box",
    label: "CheckBox"
  })))));
};
github grommet / grommet / components / CheckBox / stories / CustomCheckBox.js View on Github external
var ThemedCheckBox = function ThemedCheckBox(props) {
  var _useState = (0, _react.useState)(false),
      checked = _useState[0],
      setChecked = _useState[1];

  return _react["default"].createElement(_grommet.Grommet, {
    theme: (0, _utils.deepMerge)(_themes.grommet, customCheckBoxTheme)
  }, _react["default"].createElement(_grommet.Box, {
    align: "center",
    pad: "large"
  }, _react["default"].createElement(_grommet.CheckBox, _extends({}, props, {
    label: "Choice",
    checked: checked,
    onChange: function onChange(event) {
      return setChecked(event.target.checked);
    }
  }))));
};
github grommet / grommet / components / CheckBox / stories / WithStickyDiv.js View on Github external
}, "Click & Scroll"), checkboxes.map(function (item) {
    return _react["default"].createElement(_grommet.CheckBox, {
      key: item,
      checked: checks.includes(item),
      label: item,
      onChange: onCheck(item)
    });
  }))));
};
github grommet / grommet / all / stories / AllComponents.js View on Github external
direction: "row-responsive",
    gap: "medium",
    justify: "end",
    align: "center",
    margin: "small"
  }, _react["default"].createElement(_grommet.Box, {
    basis: "small"
  }, _react["default"].createElement(_grommet.Select, {
    plain: true,
    size: "small",
    options: ['grommet', 'dark', 'hpe', 'aruba', 'hp', 'dxc', 'v1'],
    value: themeName,
    onChange: function onChange(event) {
      return setThemeName(event.option);
    }
  })), themeCanMode && _react["default"].createElement(_grommet.CheckBox, {
    label: "dark",
    checked: themeMode === 'dark',
    onChange: function onChange() {
      return setThemeMode(themeMode === 'dark' ? 'light' : 'dark');
    }
  }), !themeCanMode && _react["default"].createElement(_grommet.Box, {
    basis: "small"
  }, _react["default"].createElement(_grommet.Select, {
    plain: true,
    placeholder: "background",
    size: "small",
    options: ['default', 'dark-1', 'light-1'],
    value: background,
    onChange: function onChange(event) {
      return setBackground(event.option);
    }
github grommet / grommet / components / CheckBox / stories / CheckBoxInsideButton.js View on Github external
var onButtonClick = function onButtonClick() {
    return setChecked(!checked);
  };

  var onCheckboxChange = function onCheckboxChange() {};

  return _react["default"].createElement(_grommet.Grommet, {
    theme: _themes.grommet
  }, _react["default"].createElement(_grommet.Box, {
    align: "center",
    pad: "large"
  }, _react["default"].createElement(_grommet.Button, {
    hoverIndicator: "background",
    onClick: onButtonClick
  }, _react["default"].createElement(_grommet.CheckBox, {
    tabIndex: "-1",
    checked: checked,
    label: _react["default"].createElement(_grommet.Text, null, "Hi"),
    onChange: onCheckboxChange
  }))));
};