grommet
Version:
focus on the essential experience
66 lines (65 loc) • 2.19 kB
JavaScript
"use strict";
exports.__esModule = true;
exports["default"] = exports.RequiredLabel = void 0;
var _react = _interopRequireDefault(require("react"));
var _grommet = require("grommet");
var _themes = require("grommet/themes");
var _utils = require("grommet/utils");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
var customTheme = (0, _utils.deepMerge)(_themes.grommet, {
formField: {
label: {
requiredIndicator: true
}
}
});
var RequiredLabel = exports.RequiredLabel = function RequiredLabel() {
return /*#__PURE__*/_react["default"].createElement(_grommet.Grommet, {
theme: customTheme
}, /*#__PURE__*/_react["default"].createElement(_grommet.Box, {
align: "center",
pad: "large"
}, /*#__PURE__*/_react["default"].createElement(_grommet.Form, null, /*#__PURE__*/_react["default"].createElement(_grommet.FormField, {
name: "firstName",
htmlFor: "firstName",
label: "First Name",
required: true
}, /*#__PURE__*/_react["default"].createElement(_grommet.TextInput, {
"aria-required": true,
id: "firstName",
name: "firstName"
})), /*#__PURE__*/_react["default"].createElement(_grommet.FormField, {
name: "lastName",
htmlFor: "lastName",
label: "Last Name",
required: true
}, /*#__PURE__*/_react["default"].createElement(_grommet.TextInput, {
"aria-required": true,
id: "lastName",
name: "lastName"
})), /*#__PURE__*/_react["default"].createElement(_grommet.FormField, {
name: "email",
htmlFor: "email",
label: "Email",
required: true
}, /*#__PURE__*/_react["default"].createElement(_grommet.TextInput, {
"aria-required": true,
id: "email",
name: "email",
type: "email"
})), /*#__PURE__*/_react["default"].createElement(_grommet.Button, {
type: "submit",
label: "Submit",
primary: true
}), /*#__PURE__*/_react["default"].createElement(_grommet.Text, {
margin: {
left: 'small'
},
size: "small",
color: "status-critical"
}, "* Required Field"))));
};
RequiredLabel.storyName = 'Required label';
var _default = exports["default"] = {
title: 'Input/Form/Custom Themed/Required label'
};