Class TJSInput

Provides a generic "input" component that creates the specific input component based on 'type'. If no type property is available in the input object text is the default.

You may optionally define a label either as input.label or through the label prop as a string. The label element uses display: contents which ignores the label element and lays out the children as if the label element does not exist which is perfect for a grid layout.

The available type props include:

- `button`: A standard button.
- `checkbox`: A checkbox input.
- `number`: A number input.
- `range`: A range input.
- `range-number`: A range + number input.
- `select`: A select input.

The following types are forwarded onto a standard text input: `email`, `password`, `search`, `text`, `url`.
Copy

CSS Variables

The following CSS variables control the associated styles with the default values:

--tjs-input-label-display - content
--tjs-input-label-text-align - right
--tjs-input-label-white-space - nowrap
Copy