Existing components
Wikimedia community:
External libraries:
Wikimedia Design Style Guide links:
Implementation notes
Scope
An Input component can have various features, and we should decide which should be included in the Input component itself and which should be added in a future Field component.
Potential features:
- Configurable icon
- Clearable (with configurable icon)
- Label
- Validation (visual change on error, error message)
Existing implementations:
- WVUI: Input has configurable icon, clearable (with configurable icon)
- WiKit: Input has none of these features, TextInput has label and validation
- CX: MWInput has configurable icon, configurable indicator that just emits an event when clicked
Input type
Should Input support only text, text and search, or more?
Existing implementations:
- WVUI: Input type prop must be of type InputType, which can be search or text
- WiKit: Input (and, subsequently, TextInput) is always type text
- CX: MWInput has type prop which can be input, search, or textarea (via prop validation). Type textarea will result in a <textarea> element instead of <input>
Should it include textarea, or should that be a separate component? Handled in T284272
Misc.
Some notes on other features we probably want to cover:
- Placeholder text is described in the DSG and there should be a mechanism for setting it
- The WVUI Input sets v-bind="$attrs" on the <input> element, which enables the end user to set attributes like dir, autocapitalize, and autocomplete on the <wvui-input> component, which will then be passed to its <input> element
- The WVUI Input emits events on change, focus, and blur in case the parent component wants to know about those things