@conduction/components/lib/components/formFields/input.js

React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { Textbox } from "@utrecht/component-library-react/dist/css-module";
import { ErrorMessage } from "./errorMessage/ErrorMessage";
export const InputPassword = ({ disabled, name, validation, register, placeholder, errors, hideErrorMessage, ariaLabel, }) => {
    return (_jsxs(_Fragment, { children: [_jsx(Textbox, { type: "password", disabled, placeholder, ...register(name, { ...validation }), invalid: !!errors[name], "aria-label": ariaLabel }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name]?.message })] }));
};
export const InputText = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, hideErrorMessage, ariaLabel, }) => (_jsxs(_Fragment, { children: [_jsx(Textbox, { type: "text", defaultValue, disabled, placeholder, icon, ...register(name, { ...validation }), invalid: !!errors[name], "aria-label": ariaLabel }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name]?.message })] }));
export const InputEmail = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, hideErrorMessage, ariaLabel, }) => (_jsxs(_Fragment, { children: [_jsx(Textbox, { type: "email", required: !!validation?.required, defaultValue, disabled, placeholder, icon, ...register(name, { ...validation }), invalid: !!errors[name], "aria-label": ariaLabel }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name]?.message })] }));
export const InputURL = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, hideErrorMessage, ariaLabel, }) => (_jsxs(_Fragment, { children: [_jsx(Textbox, { type: "url", defaultValue, disabled, placeholder, icon, ...register(name, { ...validation }), invalid: !!errors[name], "aria-label": ariaLabel }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name]?.message })] }));
export const InputNumber = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, hideErrorMessage, ariaLabel, }) => (_jsxs(_Fragment, { children: [_jsx(Textbox, { type: "number", defaultValue, disabled, placeholder, icon, ...register(name, { ...{ validation }, valueAsNumber: true }), invalid: !!errors[name], "aria-label": ariaLabel }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name]?.message })] }));
export const InputFloat = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, hideErrorMessage, ariaLabel, }) => (_jsxs(_Fragment, { children: [_jsx(Textbox, { type: "number", step: ".01", disabled, placeholder, icon, defaultValue, ...register(name, { ...{ validation }, valueAsNumber: true }), invalid: !!errors[name], "aria-label": ariaLabel }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name]?.message })] }));
export const InputFile = ({ disabled, name, accept, defaultValue, validation, register, ariaLabel, }) => (_jsx("input", { className: "denhaag-Textbox__input", type: "file", defaultValue, disabled, accept, ...register(name, { ...validation }), "aria-label": ariaLabel }));