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:

hover
focus
error
disabled
error-disabled
error-hover
error-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

// src/components/fsk/form/form-element/input/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /fsk/form/form-element/input
additionalProperties: false
properties:
  attributes:
    type: object
  children:
    type: string
    format: html
required:
  - attributes

Mocks

// src/components/fsk/form/form-element/input/mocks.yaml

attributes:
  $drupal: true
  id: input-default
$variants:
  - $name: Invalid
    attributes:
      class:
        - error
      id: input-invalid
  - $name: Filled out
    attributes:
      value: Pariatur quis tempor consequat eu
      id: input-filled-out
  - $name: Disabled
    attributes:
      disabled: true
      id: input-disabled
  - $name: Invalid and filled-out
    attributes:
      value: Excepteur sit laboris labore esse ad
      class:
        - error
      id: input-invalid-and-filled-out
  - $name: Invalid and disabled
    attributes:
      disabled: true
      class:
        - error
      id: input-invalid-and-disabled
  - $name: Filled out and disabled
    attributes:
      value: Nisi veniam
      disabled: true
      id: input-filled-out-and-disabled
  - $name: Filled out and disabled and invalid
    attributes:
      value: Adipisicing eiusmod aute
      disabled: true
      class:
        - error
      id: input-filled-out-and-disabled-and-invalid

Template

// src/components/fsk/form/form-element/input/input.html.twig

<input{{ attributes ? attributes|without("id", "class", "type", "disabled", "required") : "" }}
  id="{{ attributes.id }}"
  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 }}

Variants

default

Open

Invalid

Open

Filled out

Open

Filled out mock data

attributes:
  $drupal: true
  id: input-filled-out
  value: Pariatur quis tempor consequat eu

Disabled

Open

Invalid and filled-out

Open

Invalid and filled-out mock data

attributes:
  $drupal: true
  id: input-invalid-and-filled-out
  value: Excepteur sit laboris labore esse ad
  class:
    - error

Invalid and disabled

Open

Invalid and disabled mock data

attributes:
  $drupal: true
  id: input-invalid-and-disabled
  disabled: true
  class:
    - error

Filled out and disabled

Open

Filled out and disabled mock data

attributes:
  $drupal: true
  id: input-filled-out-and-disabled
  value: Nisi veniam
  disabled: true

Filled out and disabled and invalid

Open

Filled out and disabled and invalid mock data

attributes:
  $drupal: true
  id: input-filled-out-and-disabled-and-invalid
  value: Adipisicing eiusmod aute
  disabled: true
  class:
    - error