input
The following custom properties can be overwritten for the default state:
--FskInput-bg-color--FskInput-bg-image--FskInput-bg-position--FskInput-bg-repeat--FskInput-bg-size--FskInput-border-color--FskInput-border-radius--FskInput-border-style--FskInput-border-width--FskInput-box-shadow--FskInput-color--FskInput-font-family--FskInput-font-size--FskInput-line-height--FskInput-outline--FskInput-padding-bottom--FskInput-padding-left--FskInput-padding-right--FskInput-padding-top--FskInput-placeholder-color--FskInput-placeholder-opacity--FskInput-textarea-height--FskInput-textarea-resize--FskInput-width
The following states are available:
hoverfocuserrordisablederror-disablederror-hovererror-focus
For each state the following custom properties can be overwritten:
--FskInput-bg-color--STATE--FskInput-bg-position--STATE--FskInput-bg-size--STATE--FskInput-bg-color--STATE--FskInput-border-color--STATE--FskInput-border-style--STATE--FskInput-border-width--STATE--FskInput-box-shadow--STATE--FskInput-color--STATE--FskInput-outline--STATE--FskInput-padding-bottom--STATE--FskInput-padding-left--STATE--FskInput-padding-right--STATE--FskInput-padding-top--STATE
Information
- Folder
src/components/fsk/form/form-element/input
Files
Schema
Mocks
Template
// src/components/fsk/form/form-element/input/input.html.twig
<input{{ attributes ? attributes|without("id", "class", "type", "disabled", "required") : "" }}
{% if attributes.id %}id="{{ attributes.id }}"{% endif %}
class="FskInput {{ attributes.class }}"
type="{{ attributes.type|default("text") }}"
{% if attributes.disabled %} disabled{% endif %}
{% if attributes.required %} required{% endif %}
{% if "error" in attributes.class %} aria-invalid="true"{% endif %}
>{{ children }}