Skip to content
Jux Docs
WelcomeDesignersDevelopers

Input Element

Input Element

Technical Definition

The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. This element in Jux only allows a simple text input type, other types are coming soon.

Anatony and Styling

In Jux - the input element is a single indivisible layer. No other elements can be placed inside of the input.

The way to style the both the text value and the text placeholder is directly on the input itself. To switch between the styling of the value to the styling of the placeholder - change the selection on the ‘input mode’ property in the DDP.

Input Anatomy

Props and States

  1. Interactive state:
    1. Default
    2. Hover
    3. Active
  2. Disabled property
    1. true
    2. false
  3. Input mode (selects which content the rest of the DDP will affect:
    1. Value
    2. Placeholder
  4. Input text (text string)
  5. Placeholder text (text string)

Matrix

Input Matrix

Special mechanics

The input has the limitation that no other element can be put inside of it, and if clicked anywhere in it’s area - will trigger the focus state to start typing.

Live mode

In live mode you can:

  1. Check the interactive states of the input
  2. See the placeholder that was set in the source / instance of the input
  3. Type any value inside the input and see the placeholder text disappear.