Swegon Component Library

Input: Default 

<div class="form-item  ">
    <label for="input-field" class="form-item__label">
        Input field
        *
    </label>

    <input id="input-field" type="text" class="input__input" placeholder="Placeholder" required>

</div>
 
<div class="form-item {{getmodifiers modifiers "form-item"}} {{ additionalClasses }}">
    {{#if label}}
        <label for="{{id}}" class="form-item__label">
            {{label}}
            {{#if required}}
            *
            {{/if}}
        </label>
    {{/if}}

    <input id="{{id}}" type="{{type}}" class="input__input" placeholder="{{placeholder}}" {{#if required}}required{{/if}}{{#if disabled}} disabled{{/if}}{{#if ariainvalid}} aria-invalid="true"{{/if}}{{#if autocomplete}} autocomplete="{{ autocomplete }}"{{/if}}>

    {{#if errorMsg}}
        <div class="form-item__error-msg">{{errorMsg}}</div>
    {{/if}}
</div>
 
{
  "label": "Input field",
  "placeholder": "Placeholder",
  "id": "input-field",
  "type": "text",
  "required": true
}
  • Content: 
    import React from 'react';
import PropTypes from 'prop-types';
import ArcherTooltip from '../../archer-calculator/components/ArcherToolTip/ArcherTooltip';

const Input = (props) => {
    const handleChange = (e) => {
        if (props.onChange) {
            props.onChange(e.target.value); // Call the onChange prop with the new state
        }

    };
    return (
        <div className="form-item form-item--select ">
            <div className='input-label-wrapper'>
                <label htmlFor={props.id} className="form-item__label">
                    {props.label}
                </label>
                {props.tooltipContent &&
                    <ArcherTooltip content={props.tooltipContent} />
                }
            </div>
            <select id={props.id} onChange={handleChange} className="select__select " name="Select" >
                {props.children}
            </select>

        </div>
    );
};

Input.propTypes = {
    id: PropTypes.string,
    label: PropTypes.string,
    showPleaseSelect: PropTypes.bool,
    children: PropTypes.array,
    onChange: PropTypes.func,
    tooltipContent: PropTypes.string
};

export default Input;
  • URL: /components/raw/input/Input.jsx
  • Filesystem Path: src/components/form/input/Input.jsx
  • Size: 1.2 KB
  • Content: 
    %input {
    border: 1px solid $color-input-border;
    padding: size(1.5) size(2);
    background-color: $color-input-background;
    width: 100%;
    border-radius: 0;
    margin-bottom: size(2);

    &[aria-invalid='true'],
    &.error {
        border-color: $color-input-border-error;
        background-color: $color-input-background-error;

        @include placeholder {
            color: $color-error;
        }
    }

    &:disabled {
        background-color: $color-input-background-disabled;
        border-color: $color-input-border-disabled;
    }
}

.input__input {
    @extend %input;
}

.input-label-wrapper {
    justify-content: space-between;
    padding-right: 12px;
    display: flex;
    width: 100%;
    position: relative;

    @include breakpoint($m) {
        justify-content: flex-start;
    }
}
  • URL: /components/raw/input/input.scss
  • Filesystem Path: src/components/form/input/input.scss
  • Size: 825 Bytes

No notes defined.