Form Inputs & Primitives
The themeable building blocks the pages are made of
Every page in the library is composed from a set of lower-level primitives you can also use directly. They're controlled components with consistent sizing, variants, validation hooks and theming, so a form you build by hand looks and behaves like the generated pages.
All are import-and-use from nucleus-core/fe — no extra dependencies. Below they're grouped by what they do.
Text & numeric input#
NucleusTextInput is the workhorse — far more than an <input>. It's typed, self-validating and format-aware.
NucleusTextInputtyped + validatingOptionalA controlled input with a type (text, email, password, number, tel…), built-in validation (enableValidation + validateOnBlur / validateOnChange, a validationConfig or a customValidator, with a validation icon and typewriter error), number formatting (thousandSeparator, unit prefix/suffix), phone formatting (phoneFormat), password strength + confirm value, and preventCopy / preventPaste for sensitive fields. Sizes sm/md/lg, left/right icons, helper + error text.
CheckboxbooleanOptionalA themeable checkbox/toggle for boolean fields, with label and disabled/indeterminate states.
Selection & dates#
Dropdowns and calendars with search, ranges and locale support.
SelectBoxsearchable dropdownOptionalA typed single-select over SelectOption<T> (value, label, icon, disabled). searchable, clearable and loading states, top/bottom/auto positioning, custom renderOption / renderValue, and onSearch for async option loading. Sizes and variants (default / filled / ghost).
DatePickersingle | rangeOptionalA calendar input in single or range mode with locale support, minDate / maxDate, disabledDates / disabledDaysOfWeek, configurable dateFormat and firstDayOfWeek, and clear/today buttons.
RangePickerrangeOptionalA dedicated range selector (e.g. numeric or date ranges) for filters and report parameters.
SearchBoxdebounced searchOptionalA search input with the affordances a list/table search expects — clearable, debounced and icon-led — the box that drives useNucleusEntity's search.
Actions, feedback & security#
Buttons, tooltips, the bot-defence widget and the ambient background used on auth pages.
ButtonactionOptionalThe themeable button used across the kit — variants, sizes, loading and disabled states, leading/trailing icons.
TooltipoverlayOptionalA positioned tooltip (placements, triggers, sizes, variants) with its own tooltipTheme — used for help text and truncated content.
Captchabot defenceOptionalThe challenge widget wired to the CAPTCHA_GENERATE action (configurable type and difficulty, with captchaTheme). LoginPage and RegisterPage embed it, but it mounts anywhere you need proof-of-human.
AbstractAnimatedBackgrounddecorationOptionalThe ambient animated backdrop behind the auth pages (toggled by their showBackground prop); usable on its own for hero/empty states.
Related sections