Field

Ready

Notes
HTML
Info
View
Context
Assets

No notes defined.


        
        
            <!-- Default -->
<input class="field" type="text" id="field-uniqueID" name="fieldname" placeholder="" spellcheck="false" />


        
            <!-- Required -->
<input class="field" type="text" id="field-uniqueID-required" name="fieldname" value="Pflichtfeld" placeholder="" spellcheck="false" required="" aria-required="true" />


        
            <!-- Valid -->
<input class="field" type="text" id="field-uniqueID-valid" name="fieldname" value="Richig ausgefülltes Feld" placeholder="" spellcheck="false" required="" aria-required="true" aria-invalid="false" />


        
            <!-- Invalid -->
<input class="field" type="text" id="field-uniqueID-invalid" name="fieldname" value="Falsch ausgefülltes Feld" placeholder="" spellcheck="false" required="" aria-required="true" aria-invalid="true" />


        
            <!-- Disabled -->
<input class="field" type="text" id="field-uniqueID-disabled" name="fieldname" value="Inaktives Feld" placeholder="" disabled="disabled" />


        
            <!-- Doc Only -->
<section class="doc-variant">

    <header class="doc-variant-header">

        <h2 class="doc-variant-title">Default</h2>

        <div class="doc-variant-configuration">
            <label>
                Theme:
                <select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
                    <option value="default">default</option>
                    <option value="dark">dark</option>
                </select>
            </label>
        </div>

    </header>

    <div class="doc-variant-samples" style="flex-direction: column; align-items: stretch;" data-theme="">
        <input class="field" type="text" id="field-uniqueID" name="fieldname" placeholder="" spellcheck="false" />

    </div>

</section>
<section class="doc-variant">

    <header class="doc-variant-header">

        <h2 class="doc-variant-title">Required</h2>

        <div class="doc-variant-configuration">
            <ul data-label="State">
                <li>[required]</li>
            </ul>
        </div>

        <div class="doc-variant-configuration">
            <label>
                Theme:
                <select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
                    <option value="default">default</option>
                    <option value="dark">dark</option>
                </select>
            </label>
        </div>

    </header>

    <div class="doc-variant-samples" style="flex-direction: column; align-items: stretch;" data-theme="">
        <input class="field" type="text" id="field-uniqueID-required" name="fieldname" value="Pflichtfeld" placeholder="" spellcheck="false" required="" aria-required="true" />

    </div>

</section>
<section class="doc-variant">

    <header class="doc-variant-header">

        <h2 class="doc-variant-title">Valid</h2>

        <div class="doc-variant-configuration">
            <ul data-label="State">
                <li>[data-invalid="false"]</li>
            </ul>
        </div>

        <div class="doc-variant-configuration">
            <label>
                Theme:
                <select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
                    <option value="default">default</option>
                    <option value="dark">dark</option>
                </select>
            </label>
        </div>

    </header>

    <div class="doc-variant-samples" style="flex-direction: column; align-items: stretch;" data-theme="">
        <input class="field" type="text" id="field-uniqueID-valid" name="fieldname" value="Richig ausgefülltes Feld" placeholder="" spellcheck="false" required="" aria-required="true" aria-invalid="false" />

    </div>

</section>
<section class="doc-variant">

    <header class="doc-variant-header">

        <h2 class="doc-variant-title">Invalid</h2>

        <div class="doc-variant-configuration">
            <ul data-label="State">
                <li>[data-invalid="true"]</li>
            </ul>
        </div>

        <div class="doc-variant-configuration">
            <label>
                Theme:
                <select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
                    <option value="default">default</option>
                    <option value="dark">dark</option>
                </select>
            </label>
        </div>

    </header>

    <div class="doc-variant-samples" style="flex-direction: column; align-items: stretch;" data-theme="">
        <input class="field" type="text" id="field-uniqueID-invalid" name="fieldname" value="Falsch ausgefülltes Feld" placeholder="" spellcheck="false" required="" aria-required="true" aria-invalid="true" />

    </div>

</section>
<section class="doc-variant">

    <header class="doc-variant-header">

        <h2 class="doc-variant-title">Disabled</h2>

        <div class="doc-variant-configuration">
            <ul data-label="State">
                <li>[disabled]</li>
            </ul>
        </div>

        <div class="doc-variant-configuration">
            <label>
                Theme:
                <select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
                    <option value="default">default</option>
                    <option value="dark">dark</option>
                </select>
            </label>
        </div>

    </header>

    <div class="doc-variant-samples" style="flex-direction: column; align-items: stretch;" data-theme="">
        <input class="field" type="text" id="field-uniqueID-disabled" name="fieldname" value="Inaktives Feld" placeholder="" disabled="disabled" />

    </div>

</section>

Handle: @field
Preview:
- With layout
- Component only
Filesystem Path: components/02-elements/field/field.html
Referenced by (16): @formfield, @formfield--text, @formfield--password, @formfield--email, @formfield--tel, @formfield--url, @formfield--number, @formfield--date, @formfield--datetime-local, @formfield--required, @formfield--valid, @formfield--invalid, @formfield--disabled, @searchfield, @searchfield--without-button, @field--doc-only


        <!-- Default -->
<input class="field{{#modifier}} {{.}}{{/modifier}}"
    {{~#if type}} type="{{type}}"{{else}}type="text"{{/if~}}
    {{~#id}} id="field-{{.}}"{{/id~}}
    {{~#name}} name="{{.}}"{{/name~}}
    {{~#value}}value="{{{.}}}"{{/value~}}
    {{~#placeholder}}placeholder="{{{placeholder}}}"{{/placeholder~}}
    {{~#inputmode}} inputmode="{{.}}"{{/inputmode~}}
    {{~#pattern}} pattern="{{.}}"{{/pattern~}}
    {{~#minlength}} minlength="{{.}}"{{/minlength~}}
    {{~#maxlength}} maxlength="{{.}}"{{/maxlength~}}
    {{~#if is-disabled}} disabled="disabled"{{else}} spellcheck="false"{{/if~}}
    {{~#if is-readonly}} readonly{{/if~}}
    {{~#if is-required}} required="" aria-required="true"{{/if~}}
    {{~#if is-valid}} aria-invalid="false"{{/if~}}
    {{~#if is-invalid}} aria-invalid="true"{{/if~}}
    {{~#parsley.error-message}} data-parsley-error-message="{{{.}}}"{{/parsley.error-message~}}
    {{~#parsley.trigger}} data-parsley-trigger="{{.}}"{{/parsley.trigger~}}
    {{~#parsley.threshold}} data-parsley-validation-threshold="{{.}}"{{/parsley.threshold~}}
    {{~#parsley.custom-validator}} data-parsley-{{name}}="{{value}}"{{/parsley.custom-validator~}}
/>

<!-- Required -->
<input class="field{{#modifier}} {{.}}{{/modifier}}"
    {{~#if type}} type="{{type}}"{{else}}type="text"{{/if~}}
    {{~#id}} id="field-{{.}}"{{/id~}}
    {{~#name}} name="{{.}}"{{/name~}}
    {{~#value}}value="{{{.}}}"{{/value~}}
    {{~#placeholder}}placeholder="{{{placeholder}}}"{{/placeholder~}}
    {{~#inputmode}} inputmode="{{.}}"{{/inputmode~}}
    {{~#pattern}} pattern="{{.}}"{{/pattern~}}
    {{~#minlength}} minlength="{{.}}"{{/minlength~}}
    {{~#maxlength}} maxlength="{{.}}"{{/maxlength~}}
    {{~#if is-disabled}} disabled="disabled"{{else}} spellcheck="false"{{/if~}}
    {{~#if is-readonly}} readonly{{/if~}}
    {{~#if is-required}} required="" aria-required="true"{{/if~}}
    {{~#if is-valid}} aria-invalid="false"{{/if~}}
    {{~#if is-invalid}} aria-invalid="true"{{/if~}}
    {{~#parsley.error-message}} data-parsley-error-message="{{{.}}}"{{/parsley.error-message~}}
    {{~#parsley.trigger}} data-parsley-trigger="{{.}}"{{/parsley.trigger~}}
    {{~#parsley.threshold}} data-parsley-validation-threshold="{{.}}"{{/parsley.threshold~}}
    {{~#parsley.custom-validator}} data-parsley-{{name}}="{{value}}"{{/parsley.custom-validator~}}
/>

<!-- Valid -->
<input class="field{{#modifier}} {{.}}{{/modifier}}"
    {{~#if type}} type="{{type}}"{{else}}type="text"{{/if~}}
    {{~#id}} id="field-{{.}}"{{/id~}}
    {{~#name}} name="{{.}}"{{/name~}}
    {{~#value}}value="{{{.}}}"{{/value~}}
    {{~#placeholder}}placeholder="{{{placeholder}}}"{{/placeholder~}}
    {{~#inputmode}} inputmode="{{.}}"{{/inputmode~}}
    {{~#pattern}} pattern="{{.}}"{{/pattern~}}
    {{~#minlength}} minlength="{{.}}"{{/minlength~}}
    {{~#maxlength}} maxlength="{{.}}"{{/maxlength~}}
    {{~#if is-disabled}} disabled="disabled"{{else}} spellcheck="false"{{/if~}}
    {{~#if is-readonly}} readonly{{/if~}}
    {{~#if is-required}} required="" aria-required="true"{{/if~}}
    {{~#if is-valid}} aria-invalid="false"{{/if~}}
    {{~#if is-invalid}} aria-invalid="true"{{/if~}}
    {{~#parsley.error-message}} data-parsley-error-message="{{{.}}}"{{/parsley.error-message~}}
    {{~#parsley.trigger}} data-parsley-trigger="{{.}}"{{/parsley.trigger~}}
    {{~#parsley.threshold}} data-parsley-validation-threshold="{{.}}"{{/parsley.threshold~}}
    {{~#parsley.custom-validator}} data-parsley-{{name}}="{{value}}"{{/parsley.custom-validator~}}
/>

<!-- Invalid -->
<input class="field{{#modifier}} {{.}}{{/modifier}}"
    {{~#if type}} type="{{type}}"{{else}}type="text"{{/if~}}
    {{~#id}} id="field-{{.}}"{{/id~}}
    {{~#name}} name="{{.}}"{{/name~}}
    {{~#value}}value="{{{.}}}"{{/value~}}
    {{~#placeholder}}placeholder="{{{placeholder}}}"{{/placeholder~}}
    {{~#inputmode}} inputmode="{{.}}"{{/inputmode~}}
    {{~#pattern}} pattern="{{.}}"{{/pattern~}}
    {{~#minlength}} minlength="{{.}}"{{/minlength~}}
    {{~#maxlength}} maxlength="{{.}}"{{/maxlength~}}
    {{~#if is-disabled}} disabled="disabled"{{else}} spellcheck="false"{{/if~}}
    {{~#if is-readonly}} readonly{{/if~}}
    {{~#if is-required}} required="" aria-required="true"{{/if~}}
    {{~#if is-valid}} aria-invalid="false"{{/if~}}
    {{~#if is-invalid}} aria-invalid="true"{{/if~}}
    {{~#parsley.error-message}} data-parsley-error-message="{{{.}}}"{{/parsley.error-message~}}
    {{~#parsley.trigger}} data-parsley-trigger="{{.}}"{{/parsley.trigger~}}
    {{~#parsley.threshold}} data-parsley-validation-threshold="{{.}}"{{/parsley.threshold~}}
    {{~#parsley.custom-validator}} data-parsley-{{name}}="{{value}}"{{/parsley.custom-validator~}}
/>

<!-- Disabled -->
<input class="field{{#modifier}} {{.}}{{/modifier}}"
    {{~#if type}} type="{{type}}"{{else}}type="text"{{/if~}}
    {{~#id}} id="field-{{.}}"{{/id~}}
    {{~#name}} name="{{.}}"{{/name~}}
    {{~#value}}value="{{{.}}}"{{/value~}}
    {{~#placeholder}}placeholder="{{{placeholder}}}"{{/placeholder~}}
    {{~#inputmode}} inputmode="{{.}}"{{/inputmode~}}
    {{~#pattern}} pattern="{{.}}"{{/pattern~}}
    {{~#minlength}} minlength="{{.}}"{{/minlength~}}
    {{~#maxlength}} maxlength="{{.}}"{{/maxlength~}}
    {{~#if is-disabled}} disabled="disabled"{{else}} spellcheck="false"{{/if~}}
    {{~#if is-readonly}} readonly{{/if~}}
    {{~#if is-required}} required="" aria-required="true"{{/if~}}
    {{~#if is-valid}} aria-invalid="false"{{/if~}}
    {{~#if is-invalid}} aria-invalid="true"{{/if~}}
    {{~#parsley.error-message}} data-parsley-error-message="{{{.}}}"{{/parsley.error-message~}}
    {{~#parsley.trigger}} data-parsley-trigger="{{.}}"{{/parsley.trigger~}}
    {{~#parsley.threshold}} data-parsley-validation-threshold="{{.}}"{{/parsley.threshold~}}
    {{~#parsley.custom-validator}} data-parsley-{{name}}="{{value}}"{{/parsley.custom-validator~}}
/>

<!-- Doc Only -->
{{#variants}}
<section class="doc-variant">

    <header class="doc-variant-header">

            {{#title}}
        <h2 class="doc-variant-title">{{{.}}}</h2>
            {{/title}}

            {{#if states}}
        <div class="doc-variant-configuration">
            <ul data-label="State">
                    {{#states}}
                <li>{{{.}}}</li>
                    {{/states}}
            </ul>
        </div>
            {{/if}}

            {{#if ../themes}}
        <div class="doc-variant-configuration">
            <label>
                Theme:
                <select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
                        {{#../themes}}
                    <option value="{{{.}}}">{{{.}}}</option>
                        {{/../themes}}
                </select>
            </label>
        </div>
            {{/if}}

    </header>

    <div class="doc-variant-samples" style="flex-direction: column; align-items: stretch;" data-theme="{{theme}}">
        {{#samples}}
            {{render '@field' (contextData '@field' this) merge=true}}
        {{/samples}}
    </div>

</section>
    {{/variants}}


        
        
            /* Default */
{
  "id": "uniqueID",
  "name": "fieldname",
  "type": "text",
  "placeholder": "Beispiel für Platzhalter"
}


        
            /* Required */
{
  "id": "uniqueID-required",
  "name": "fieldname",
  "type": "text",
  "placeholder": "Beispiel für Platzhalter",
  "is-required": true,
  "value": "Pflichtfeld"
}


        
            /* Valid */
{
  "id": "uniqueID-valid",
  "name": "fieldname",
  "type": "text",
  "placeholder": "Beispiel für Platzhalter",
  "is-required": true,
  "is-valid": true,
  "value": "Richig ausgefülltes Feld"
}


        
            /* Invalid */
{
  "id": "uniqueID-invalid",
  "name": "fieldname",
  "type": "text",
  "placeholder": "Beispiel für Platzhalter",
  "is-required": true,
  "is-invalid": true,
  "value": "Falsch ausgefülltes Feld"
}


        
            /* Disabled */
{
  "id": "uniqueID-disabled",
  "name": "fieldname",
  "type": "text",
  "placeholder": "Beispiel für Platzhalter",
  "is-disabled": true,
  "value": "Inaktives Feld"
}


        
            /* Doc Only */
{
  "id": "uniqueID",
  "name": "fieldname",
  "type": "text",
  "placeholder": "Beispiel für Platzhalter",
  "themes": [
    "default",
    "dark"
  ],
  "variants": [
    {
      "title": "Default",
      "samples": {
        "id": "uniqueID",
        "name": "fieldname",
        "type": "text",
        "placeholder": "Beispiel für Platzhalter"
      }
    },
    {
      "title": "Required",
      "states": "[required]",
      "samples": {
        "id": "uniqueID-required",
        "name": "fieldname",
        "type": "text",
        "placeholder": "Beispiel für Platzhalter",
        "is-required": true,
        "value": "Pflichtfeld"
      }
    },
    {
      "title": "Valid",
      "states": "[data-invalid=\"false\"]",
      "samples": {
        "id": "uniqueID-valid",
        "name": "fieldname",
        "type": "text",
        "placeholder": "Beispiel für Platzhalter",
        "is-required": true,
        "is-valid": true,
        "value": "Richig ausgefülltes Feld"
      }
    },
    {
      "title": "Invalid",
      "states": "[data-invalid=\"true\"]",
      "samples": {
        "id": "uniqueID-invalid",
        "name": "fieldname",
        "type": "text",
        "placeholder": "Beispiel für Platzhalter",
        "is-required": true,
        "is-invalid": true,
        "value": "Falsch ausgefülltes Feld"
      }
    },
    {
      "title": "Disabled",
      "states": "[disabled]",
      "samples": {
        "id": "uniqueID-disabled",
        "name": "fieldname",
        "type": "text",
        "placeholder": "Beispiel für Platzhalter",
        "is-disabled": true,
        "value": "Inaktives Feld"
      }
    }
  ]
}

File:

Content:


                                @mixin field-stacking(
    $spacing: $field_stack-spacing,
) {
    display: flex;
    flex-direction: column;
    row-gap: $spacing;
}

URL: /components/raw/field/_field.helpers.scss
Filesystem Path: components/02-elements/field/_field.helpers.scss
Size: 135 Bytes

Content:


                                @import "_field.settings.psi";

@import "_field.helpers";
@import "_field.settings";
@import "_field.styles";

%field {
    // Compensate different border-widths
    padding-top: calc(#{nth($field_padding, 1)} + 1px);
    padding-bottom: calc(#{nth($field_padding, 1)} + 1px);
}

URL: /components/raw/field/_field.scss
Filesystem Path: components/02-elements/field/_field.scss
Size: 280 Bytes

Content:


                                $field_padding: .55em 1em !default;

$field_focus-color: $_action-border-color--hover !default;

$field_border-color: $_border-color $_border-color $_text-color $_border-color !default;
$field_border-width: 1px 1px 3px 1px !default;
$field_border-radius: 3px 3px 0 0 !default;

$field_styles: (
    background-color: var(--field-background-color, white),
    color: var(--field-color, #{$_TEXT-COLOR}),
    border-style: solid,
    border-width: 1px 1px 3px 1px,
    border-color: $_border-color $_border-color $_text-color $_border-color,
    border-radius: $field_border-radius,
) !default;

$field_states: (
    default: $field_styles,
    focus: $_focus_styles,
    valid: (
    ),
    invalid: (
        border-color: $_negative-border-color,
    ),
    disabled: (
        background-color: transparent,
        color: $_disabled-color,
        border-color: $_border-color $_border-color $_disabled-color $_border-color,
    ),
) !default;

$field_placeholder_color: transparent !default;

URL: /components/raw/field/_field.settings.psi.scss
Filesystem Path: components/02-elements/field/_field.settings.psi.scss
Size: 996 Bytes

Content:


                                $field_padding: .25em .75em !default;
$field_stack-spacing: .25em !default;

$field_font-size: 1rem !default;
$field_font-size--mobile: $field_font-size !default;

$field_line-height: $_line-height !default;
$field_line-height--mobile: $field_line-height !default;

$field_border-color: $_border-color !default;
$field_border-width: $_border-width !default;
$field_border-radius: 0 !default;

$field_styles: (
    background-color: $_white,
    border: $field_border-width solid $field_border-color,
    border-radius: $field_border-radius,
) !default;

$field_states: (
    default: $field_styles,
    focus: $_focus_styles,
    valid: (
    ),
    invalid: (
        border-color: $_negative-border-color,
    ),
    disabled: (
        background-color: transparent,
        color: $_disabled-color,
        border-color: $_disabled-color,
    ),
) !default;

$field_placeholder_color: $_minor-color !default;

//**** Calculated values *****//

$field_padding_map: split-property($field_padding);
$field_border-width_map: split-property($field_border-width);

    // Calculate height of field

$field_height: get-outer-height(
    $font-size: $field_font-size,
    $line-height: $field_line-height,
    $padding: $field_padding,
    $border: $field_border-width,
    $base: $_base-font-size,
) !default;

$field_height--mobile: get-outer-height(
    $font-size: $field_font-size--mobile,
    $line-height: $field_line-height--mobile,
    $padding: $field_padding,
    $border: $field_border-width,
    $base: $_base-font-size--mobile,
) !default;

//***** Legacy *****//

$field_color: $_text-color !default;
$field_color--valid: $_text-color !default;
$field_color--invalid: $_text-color !default;
$field_color--disabled: $_disabled-color !default;

$field_background-color: $_white !default;
$field_background-color--valid: $field_background-color !default;
$field_background-color--invalid: $field_background-color !default;
$field_background-color--disabled: transparent !default;

$field_border-color: $_border-color !default;
$field_border-color--valid: $field_border-color !default;
$field_border-color--invalid: $_negative-accent-color !default;
$field_border-color--disabled: $_disabled-color !default;

URL: /components/raw/field/_field.settings.scss
Filesystem Path: components/02-elements/field/_field.settings.scss
Size: 2.2 KB

Content:


                                %field {
    @include stack-spacing();

    display: block;
    width: 100%;
    padding: $field_padding;

    font-size: $field_font-size;
    line-height: $field_line-height;

    @include base-transition(out, border-color);

    @include styles($field_styles);

    &::placeholder {
        color: $field_placeholder_color;
    }

    &:not([disabled]):focus {
        @include state-styles($field_states, focus);
        outline: transparent;

        @include base-transition(in, border-color);

        &::placeholder {
            color: transparent;
        }

    }

    &[aria-invalid="false"],
    &--valid {

        &:not(:focus) {
            @include state-styles($field_states, valid);
        }

    }

    &[aria-invalid="true"],
    &--invalid {

        &:not(:focus) {
            @include state-styles($field_states, invalid);
        }

    }

    &[disabled],
    &--disabled {
        $styles: get-state-styles($field_states, disabled);

        @include styles($styles);
        cursor: default;

        &::placeholder {
            @include styles($styles, color);
        }

    }

        // Set min-height for date fields on iOS

    &[type="date"] {
        appearance: textfield;
        min-height: $field_height;

        &::-webkit-date-and-time-value {
            text-align: left;
        }

        @include only-on-mobile(){
            min-height: $field_height--mobile;
        }

    }

}

.field {
    @extend %field;
}

// Deprecated

.field {
    @extend %field;

    &.is-valid,
    &.is-success {
        @extend %field--valid;
    }

    &.is-invalid,
    &.is-error {
        @extend %field--invalid;
    }

    &.disabled {
        @extend %field--disabled;
    }

}

URL: /components/raw/field/_field.styles.scss
Filesystem Path: components/02-elements/field/_field.styles.scss
Size: 1.7 KB