fc-input
An element for data entry
Usage
<script>
import '@forter/input';
</script>
<fc-input name="input"></fc-input>
Examples
<!-- prefix -->
<fc-input>
<fc-icon slot="prefix" icon="search"></fc-icon>
</fc-input>
<!-- suffix -->
<fc-input>
<fc-icon slot="suffix" icon="close"></fc-icon>
</fc-input>
<!-- prefix and suffix -->
<fc-input>
<fc-icon slot="prefix" icon="search"></fc-icon>
<fc-icon slot="suffix" icon="close"></fc-icon>
</fc-input>
<!-- number and max -->
<fc-input type="number" step="any" max="10">
</fc-input>
<!-- tel icon -->
<fc-input type="tel" icon>
</fc-input>
<!-- password icon -->
<fc-input type="password" icon>
</fc-input>
<!-- number icon -->
<fc-input type="number" step="any" icon>
</fc-input>
<!-- email icon -->
<fc-input type="email" icon>
</fc-input>
<!-- file icon -->
<fc-input type="file" icon>
</fc-input>
<!-- search icon -->
<fc-input type="search" icon>
</fc-input>
<!-- valueList icon -->
<fc-input type="valueList" icon>
</fc-input>
Properties
Property | Attribute | Type | Default | Description |
---|---|---|---|---|
disabled |
disabled |
boolean |
false | Whether the input is disabled |
flat |
flat |
boolean |
false | Whether the input had no depth or border |
icon |
icon |
boolean |
false | Whether to display the type icon at the prefix |
invalid |
invalid |
boolean |
false | Whether the input is invalid |
label |
label |
string |
"Enter text..." | Label for the input. example: I just wrote something!
|
loading |
loading |
boolean |
false | If the button is loading |
max |
max |
string | number |
max value for the input. example: 10
|
|
min |
min |
string | number |
min value for the input. example: 0
|
|
name |
name |
string |
||
novalidation |
novalidation |
boolean |
false | Set to true when you wish to control input validation state from outside the component |
pattern |
pattern |
string |
HTML5 pattern for the string | |
readonly |
readonly |
boolean |
false | Whether the input is readonly |
required |
required |
boolean |
false | If the input is required |
size |
"small" | "medium" | "large" |
Pre-Defined size | ||
type |
type |
"color" | "email" | "number" | "password" | "search" | "tel" | "url" | "date" | "file" | "time" | "upload" | "valueList" |
"text" | The input's type |
valid |
valid |
boolean |
false | Whether the input is valid |
value |
string |
"" | Input's value. example: Assaf
|
|
values |
values |
any[] |
When type is value list, those are the default values Values represents as array of objects: {id: 1, label: 'first'} |
|
warning |
warning |
string |
Events
Event | Description |
---|---|
change |
|
input |
fired when the input is changed |
CSS Custom Properties
Property | Description |
---|---|
--fc-input-background-color |
inputs background-color, default: white
|
--fc-input-border-radius |
example: 2px
|
--fc-input-cursor |
default: text . example: pointer
|
--fc-input-focus-border |
example: inset 0 0 0 4px rgba(255, 0, 0, 0.21)
|
--fc-input-font |
the font, default: 13px 400 . example: var(--fc-font-20px-600)
|
--fc-input-font-color |
input's font color, default: black
|
--fc-input-height |
inputs height, default: 33px
|
--fc-input-placeholder-color |
input's placeholder color, default: black
|
--fc-input-prefix-height |
default: 20px
|
--fc-input-shadow |
default: 0 2px 6px 2px var(--grey-3, #dee2e6)
|
--fc-input-suffix-height |
default: 20px
|
--fc-input-width |
default: 203px . example: 500px
|
fc-textarea
An element for data entry for longer text.
Usage
<script>
import '@forter/input';
</script>
<fc-textarea></fc-textarea>
Properties
Property | Attribute | Type | Default | Description |
---|---|---|---|---|
disabled |
disabled |
boolean |
false | |
flat |
flat |
boolean |
false | Whether the input had no depth or border |
hideResize |
hideResize |
"" | "resize: none" |
||
invalid |
invalid |
boolean |
false | Whether the input is invalid |
label |
label |
string |
"Enter text..." | Label for the input |
maxlength |
maxlength |
string |
Maximum text length | |
minlength |
minlength |
string |
Minimum text length | |
name |
name |
string |
||
readonly |
readonly |
boolean |
false | If the input is readonly |
required |
required |
boolean |
false | If the input is required |
rows |
rows |
string |
"10" | Number of rows for the textarea |
spellcheck |
spellcheck |
"true" | "default" | "false" |
"default" | Specifies whether the <textarea> is subject to spell checking by the underlying browser/OS. |
valid |
valid |
boolean |
false | Whether the input is valid |
value |
string |
"" | Input's value | |
wrap |
wrap |
"hard" | "soft" |
"soft" | Indicates how the control wraps text. Possible values are: - hard : The browser automatically inserts line breaks (CR+LF) so that each line has no more than the width of the control; the cols attribute must also be specified for this to take effect.- soft : The browser ensures that all line breaks in the value consist of a CR+LF pair, but does not insert any additional line breaks. |
Events
Event | Description |
---|---|
change |
when typing input method: onInput example: { "target": { "invalid": true, "value": "text" } }
|
CSS Custom Properties
Property | Description |
---|---|
--fc-textarea-font |
the font, default: 13px 400 . example: var(--fc-font-20px-600)
|
--fc-textarea-width |
default: 100% . example: 200px
|