Input component | investigate

[seyedalimoosavi]

Epic: #23

[mbpmohsen]

We decided to design a component that could be used for all form component, which is as follows :

• Text input
• Radio button
• Checkbox
• Range
• Text area
• Select

Well, our main case is the text input that we first deal with first.
The structure of this component is as follows:

• Label
• Input
• Prepend
• Prepend inner
• Append
• Append outer
• Error
• Help
• Suggestion

You can also see its basic code structure here:

<plus-input>
  <div slot="prepend"></div>
  <div slot="prepend-inner"></div>
  <label for="">Label</label>
  <input type="text">
  <div slot="append"></div>
  <div slot="append-outer"></div>
  <div slot="suggestion"></div>
  <div slot="error"></div>
  <div slot="help"></div>
</plus-input>

All sections are identified using slot.

Now in this section we will deal with all the needs of a input:

Disabled:
Any part or all of the components must be able to be disabled.

Limitation

The developer must be able to define limitation for each component.

Type
The component must be able to have mask for the component by default, such as:

• Currency format
• Phone number format
• Time

Password

The password type must be visible with action for user

Responsive

All components should be responsive and their styles should be defined as css variable