Text Area

Text area thumbnail placed in the elements panel in Jux UI. Click or drag to the canvas to create a local component.

Technical definition

TText area field is not a native HTML element, but a composite component that has a transparent textarea element inside of it.

---

Anatomy and styling

The text area field element consists of 3 parts: A label, a logical slot named ‘trigger’ that holds a div wrapper with the instance of the text area element, and a helper text.

Like with the input inside the Text field element, the Text area element inside the content wrapper is un-styled in all of its states. All of the styles are happening on the level of the content wrapper. This structure allows inserting other elements into the content wrapper that are not part of Text area element, while still visually making it look like part of the ‘field boundary’.

Props and states

1. Interactive state:
   1. Default
   2. Hover
   3. Active
2. Disabled property
   1. true
   2. false
3. Expandable (controls wether the text area can be resized when live)
   1. true
   2. false
4. Input mode (selects which content the rest of the DDP will affect:
   1. Value
   2. Placeholder
5. Input text (text string)
6. Placeholder text (text string)

Matrix

Matrix view showing all possible combinations of text area states and properties

Special mechanics

1. The Text area 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.
2. Expandable prop allows you to select wether the text area should be open to be resized when live.

Live mode

In live mode you can:

1. Switch between the interactive states of the input
2. See the placeholder that was set in the source / instance of the Text area
3. Type any value inside the input and see the placeholder text disappear.
4. If Expandable is true - resize the text area with the mouse.