Skip to catalog content
Mado UI Open-code components

Source-owned · zero runtime dependencies

primitive · form-controls

Native form controls

Opt-in styles for native input, select, textarea and checkbox controls.

Install with npx @madojs/ui@latest add form-controls.

Primitive

Native form controls

Required, validated and submitted by the browser.
The form has not been submitted.

Composition

  • Apply mado-ui-control to native text-like inputs, select and textarea; use mado-ui-checkbox inside an explicit label for checkbox or radio choices.

Public API

class mado-ui-control
Shared native input, select and textarea presentation.
class mado-ui-checkbox
Native checkbox or radio visual sizing.
class mado-ui-check / mado-ui-check-description
Label and supporting-copy composition for native choices.
attribute aria-invalid
Application-owned invalid state consumed by the visual recipe.

Detected public classes

  • .mado-ui-check
  • .mado-ui-check-description
  • .mado-ui-checkbox
  • .mado-ui-control

Detected public CSS properties

  • --mado-ui-color-action
  • --mado-ui-color-border
  • --mado-ui-color-danger
  • --mado-ui-color-surface
  • --mado-ui-color-surface-soft
  • --mado-ui-color-text
  • --mado-ui-color-text-muted
  • --mado-ui-control-background
  • --mado-ui-control-border
  • --mado-ui-control-color
  • --mado-ui-control-focus-ring
  • --mado-ui-control-height
  • --mado-ui-control-padding
  • --mado-ui-control-radius
  • --mado-ui-control-shadow
  • --mado-ui-focus-ring
  • --mado-ui-radius-sm
  • --mado-ui-space-1
  • --mado-ui-space-2
  • --mado-ui-space-3
  • --mado-ui-textarea-min-height

Accessibility contract

  • Keep label, name, required, disabled, readonly, autocomplete and constraint validation native.
  • Do not paint untouched :invalid controls as application errors; expose the chosen validation lifecycle explicitly.

Keyboard

  • The recipe adds no composite keyboard model; native interactive descendants keep their browser-defined keys and Tab order.

Focus

  • Focus remains on native links, buttons or controls. Presentational wrappers never become focusable.

Fallback

  • Without the copied stylesheet, the semantic source HTML remains readable and operable.

Installation graph

Direct dependencies

Resolved install order

Copied source

The CLI resolves each registry source path into the configured project target. Links below point to the exact catalog build tag.