Nomming Peanut M&M's

    @forter/input

    3.14.3 • Public • Published

    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

    Install

    npm i @forter/input

    DownloadsWeekly Downloads

    42

    Version

    3.14.3

    License

    Apache-2.0

    Unpacked Size

    254 kB

    Total Files

    149

    Last publish

    Collaborators

    • forter-npm
    • lirown
    • oweingart