@workday/canvas-kit-docs
Version:
Documentation components of Canvas Kit components
20 lines (19 loc) • 1.41 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React from 'react';
import { PrimaryButton } from '@workday/canvas-kit-react/button';
import { AriaLiveRegion, changeFocus } from '@workday/canvas-kit-react/common';
import { FormField } from '@workday/canvas-kit-react/form-field';
import { TextInput } from '@workday/canvas-kit-react/text-input';
import { createStyles } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
const hintStyles = createStyles({
height: system.size.xs,
});
export const TextInputWithLiveError = () => {
const errMsg = 'Error: First name is required.';
const [hasError, setHasError] = React.useState('no');
const inputRef = React.useRef(null);
const handleBlur = (e) => setHasError(e.target.value.trim().length === 0 ? 'error' : 'no');
const handleSubmit = () => hasError && changeFocus(inputRef.current);
return (_jsxs(_Fragment, { children: [_jsxs(FormField, { error: hasError === 'error' ? 'error' : undefined, isRequired: true, children: [_jsx(FormField.Label, { children: "First Name:" }), _jsx(FormField.Input, { as: TextInput, onBlur: handleBlur, ref: inputRef }), _jsx(FormField.Hint, { cs: hintStyles, children: _jsx(AriaLiveRegion, { children: hasError === 'error' && errMsg }) })] }), _jsx(PrimaryButton, { onClick: handleSubmit, children: "Continue" })] }));
};