Moxi Design System

# Inputs & Textareas

The mx-input component serves as both a single-line and multi-line text field. Optional elements include icons, assistive text, and a label.

See also Block Inputs, which are now preferred for most form fields.

The icons for Moxi Design System are from https://phosphoricons.com/ (opens new window). Icons that are embedded in the design system are also available.

# Standard Input


Regular
Dense 
<div class="grid grid-cols-1 lg:grid-cols-2 gap-40">
  <div>
    <strong>Regular</strong>
    <div class="my-20">
      <mx-input label="Label" placeholder="Placeholder"></mx-input>
    </div>
    <div class="my-20">
      <mx-input label="Floating Label" float-label></mx-input>
    </div>
    <div class="my-20">
      <mx-input label="Label & Left Icon" left-icon="ph ph-apple-logo"></mx-input>
    </div>
    <div class="my-20">
      <mx-input label="Floating Label & Left Icon" float-label left-icon="ph ph-apple-logo"></mx-input>
    </div>
    <div class="my-20">
      <mx-input
        label="Label & Clickable Right Icons"
        :right-icon.prop="[
          { icon: 'ph ph-x', ariaLabel: 'Cancel', onClick: clickHandler },
          { icon: 'ph ph-check', ariaLabel: 'OK', onClick: clickHandler },
        ]"
      />
    </div>
    <div class="my-20">
      <mx-input label="Label & Assistive Text" assistive-text="Helpful text about input"></mx-input>
    </div>
    <div class="my-20">
      <mx-input label="Label & Error" :value="inputValue" error assistive-text="Error message"></mx-input>
    </div>
    <div class="my-20">
      <mx-input label="Disabled" assistive-text="This input is disabled" disabled :value="inputValue"></mx-input>
    </div>
    <div class="my-20">
      <mx-input label="Read-only" assistive-text="This input is read-only" readonly :value="inputValue" @input="inputValue = $event.target.value"></mx-input>
    </div>
    <div class="my-20">
      <mx-input label="Label & Suffix" suffix="SQFT" dense></mx-input>
    </div>
    <div class="my-20">
      <mx-input maxlength="100" label="Label" assistive-text="This input has a maxlength attribute" :value="inputValue" @input="inputValue = $event.target.value"></mx-input>
    </div>
  </div>
  <div>
    <strong>Dense</strong>
    <div class="my-20">
      <mx-input label="Label" placeholder="Placeholder" dense></mx-input>
    </div>
    <div class="my-20">
      <mx-input label="Floating Label" float-label dense></mx-input>
    </div>
    <div class="my-20">
      <mx-input label="Label & Left Icon" left-icon="ph ph-apple-logo" dense></mx-input>
    </div>
    <div class="my-20">
      <mx-input label="Floating Label & Left Icon" float-label left-icon="ph ph-apple-logo" dense></mx-input>
    </div>
    <div class="my-20">
      <mx-input
        label="Label & Clickable Right Icons"
        :right-icon.prop="[
          { icon: 'ph ph-x', ariaLabel: 'Cancel', onClick: clickHandler },
          { icon: 'ph ph-check', ariaLabel: 'OK', onClick: clickHandler },
        ]"
        dense
      />
    </div>
    <div class="my-20">
      <mx-input label="Label & Assistive Text" assistive-text="Helpful text about input" dense></mx-input>
    </div>
    <div class="my-20">
      <mx-input label="Label & Error" :value="inputValue" error assistive-text="Error message" dense></mx-input>
    </div>
    <div class="my-20">
      <mx-input label="Disabled" assistive-text="This input is disabled" disabled :value="inputValue" dense></mx-input>
    </div>
    <div class="my-20">
      <mx-input label="Read-only" assistive-text="This input is read-only" readonly dense :value="inputValue" @input="inputValue = $event.target.value"></mx-input>
    </div>
    <div class="my-20">
      <mx-input label="Label & Suffix" suffix="SQFT" dense></mx-input>
    </div>
    <div class="my-20">
      <mx-input maxlength="100" label="Label" assistive-text="This input has a maxlength attribute" dense :value="inputValue" @input="inputValue = $event.target.value"></mx-input>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

# Text Area


# Click-to-edit inputs with confirmation

The mx-confirm-input component wraps the mx-input component, and provides additional edit-in-place behaviors.

  • If a value is present, the input has no border or background color when not hovered or focused.
  • If Escape is pressed, or if the icon is clicked, then changes inside the input are discarded.
  • If Enter is pressed, or if the icon is clicked, then the value is updated and an input event is fired.
<mx-confirm-input placeholder="Placeholder" value="Click to edit this value." />
<mx-confirm-input float-label label="Label" value="" />
<mx-confirm-input disabled el-aria-label="Disabled input" value="This is a value, but the input is disabled." />
1
2

# mx-input

# Properties

Property Attribute Description Type Default
assistiveText assistive-text string undefined
autofocus autofocus boolean false
clearErrorOnFocus clear-error-on-focus boolean true
dense dense boolean false
disabled disabled boolean false
elAriaLabel el-aria-label The aria-label attribute for the inner input element. string undefined
error error boolean false
floatLabel float-label boolean false
hideCharacterCount hide-character-count Set to true to hide the character count when a maxlength is set. boolean false
inputId input-id The id attribute for the text input string undefined
label label Text for the label element string undefined
labelClass label-class string ''
leftIcon left-icon The class name of the icon to show on the left side of the input, or an array of objects specifying an icon, ariaLabel, and onClick handler MxInputIcon[] \| string undefined
maxlength maxlength number undefined
name name The name attribute for the text input string undefined
outerContainerClass outer-container-class string ''
placeholder placeholder Placeholder text for the input. This will be ignored if floatLabel is true. string undefined
readonly readonly boolean false
rightIcon right-icon The class name of the icon to show on the right side of the input, or an array of objects specifying an icon, ariaLabel, and onClick handler MxInputIcon[] \| string undefined
step step string undefined
suffix suffix Text shown to the right of the input value string undefined
textarea textarea Display a multi-line textarea instead of an input boolean false
textareaHeight textarea-height string '15.625rem'
type type The type attribute for the text input string 'text'
value value string undefined

# Dependencies

# Used by

# Graph

graph TD;
  mx-confirm-input --> mx-input
  style mx-input fill:#f9f,stroke:#333,stroke-width:4px
1
2
3

If you are having trouble setting a prop or adding an event listener, refer to this page.

← Menus →