@carissa-io/components-input

Label + input + optional side button + error line. React component, SCSS-themed, hand-rolled validation.

npm i @carissa-io/components-input

Use

import { Input } from '@carissa-io/components-input'

<Input
    label="Age"
    type="number"            // default: text
    required
    min={18}                 // min/max: numbers and dates
    max={99}
    messages={{ required: t('required'), min: t('too_young'), max: t('too_old') }}
    onChange={(value) => setAge(value)}
    onValidate={(isValid, errorCode) => setFormValid(isValid)}
/>

| Prop | | |---|---| | label, name, id, type (text), placeholder, disabled, className, … | usual; unknown props go to the <input> | | value + onChange(value, event) | controlled; or defaultValue for uncontrolled | | required, min, max, min_length, max_length | built-in validation (min/max apply to number/range and date/time types) | | validate(value) | extra check: return an error code, or a falsy value if fine (runs only on non-empty values) | | onValidate(isValid, errorCode) | fires on mount and whenever the outcome changes | | messages | { [errorCode]: text }; without an entry the bare code is shown | | error | an error from the parent (e.g. the API); wins over the built-in one and shows immediately | | multiline, rows (3) | renders a <textarea> instead of the <input>: same label, validation and error line. type, min and max do not apply to it | | start, end | nodes rendered inside the field before and after the control (an icon, a unit): span.c-input__start / span.c-input__end, only when given. end sits before the side button. See below | | button_icon + button_callback | side button; rendered only when both are given. button_label is its aria-label |

With multiline the control is a <textarea class="c-input__control"> and the root gets the modifier c-input--multiline; min_length and max_length count characters (line breaks included).

start and end are plain markup, with no behaviour of their own; they also work with multiline. Example:

<Input label="Price" type="number" start="$" end="kg" />
<Input label="Search" start={<SearchIcon />} />

Wrappers use them for icons and inline actions (for example the search field's leading icon and clear button). Their gap is $c-input-adornment-gap (extra space on top of the field gap) and their color $c-input-adornment-color.

The built-in error shows after the field is first blurred; onValidate reports from the start. validateValue(value, rules) and isEmpty are exported for use outside the component.

Style

@use '@carissa-io/components-input/scss' with (
    $c-input-border-color: #c0c0c0,
    $c-input-radius: 0
);

All variables are in scss/_variables.scss. Classes: c-input, __box, __label, __field, __control, __start, __end, __button, __error; modifiers --invalid, --required, --disabled, --multiline. For the textarea, $c-input-resize (vertical by default) and $c-input-textarea-min-height (0, so today's look is kept) apply only inside .c-input--multiline.