<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
}
import React from 'react';
import PropTypes from 'prop-types';
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 ">
<label htmlFor={props.id} className="form-item__label">
{props.label}
</label>
<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
};
export default Input;
%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;
}
No notes defined.