Form: Text

Ready

HTML
View
Context
Assets
Info
Notes


        
        <form action="/" method="POST" class="cwf-form">
    <div class="cwf-form__field ">
        <label for="diploma_name" class="cwf-form__label">Full name</label>
        <p class="cwf-form__help">
            This field will be printed on your diploma
        </p>
        <input class="cwf-form__input" id="diploma_name" name="diploma_name" placeholder="Rodney the Ram" required type="text" value="John Doe" />

    </div>
</form>


        <form action="/" method="POST" class="cwf-form">
    {% include './input.twig' with context %}
</form>


        
            
            {
  "error": "",
  "readonly": false,
  "required": true,
  "help": "This field will be printed on your diploma",
  "id": "diploma_name",
  "label": "Full name",
  "placeholder": "Rodney the Ram",
  "value": "John Doe",
  "type": "text"
}

File:

Content:


                                // Form component styles

@import "../../shared/scss/animation";
@import "../../shared/scss/reset";
@import "../../shared/scss/style";

// Form

.cwf-form {
    --cwf-form__input--background-color: #{style__color(white-dark)};
    --cwf-form__input--disabled--background-color: #{darken(
            style__color(white-dark),
            5%
        )}; // #ebebeb
    --cwf-form__input--border-color: #{style__color(white-darkest)};
    --cwf-form__input--placeholder--color: #{style__color(gray-lightest)};
    --cwf-form__input--hover--border-color: #{style__color(gray-lightest)};
    --cwf-form__input--focus--border-color: #{style__color(gray-darkest)};
    --cwf-form__input--focus--background-color: #{style__color(white)};
    --cwf-form__help--color: #{style__color(gray-lightest)};
    --cwf-form--error-color: #{style__color(red, accent)};
    --cwf-form--success-color: #{style__color(green, accent)};
}

// Field

.cwf-form__field {
    margin-bottom: 1rem;

    & > *:last-child {
        margin-bottom: 0;
    }
}

// Label

.cwf-form__label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

// Input

.cwf-form__input {
    display: block;
    margin-bottom: 0.5rem;
    background-color: var(--cwf-form__input--background-color);
    font-family: $reset__font-stack;
    font-size: 1rem;
    resize: none;
    width: 100%;
    &:hover {
        border-color: var(--cwf-form__input--hover--border-color);
    }
    &:focus {
        border-color: var(--cwf-form__input--focus--border-color);
        background-color: var(--cwf-form__input--focus--background-color);
    }

    &::placeholder {
        color: var(--cwf-form__input--placeholder--color);
        opacity: 1;
    }

    &:disabled,
    &[readonly] {
        background-color: var(--cwf-form__input--disabled--background-color);
        color: var(--cwf-form__input--placeholder--color);
    }

    &:disabled:hover,
    &:disabled:focus {
        border-color: var(--cwf-form__input--border-color);
    }

    &[type="number"] {
        -webkit-appearance: none;
        -moz-appearance: textfield;
    }
}

// Icon

.cwf-form__icon {
    position: relative;

    &:before {
        position: absolute;
        top: 0;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 3rem;
        height: 100%;
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        color: var(--cwf-form__input--hover--border-color);
        pointer-events: none;
    }

    .cwf-form__input {
        height: 100%;
        padding-right: 3rem;
    }

    select.cwf-form__input {
        appearance: none;
    }
}

.cwf-form__icon--select {
    &:before {
        content: "\f078";
        @include animation__transition(transform);
    }

    &:focus-within {
        &:before {
            transform: rotate(-180deg);
        }
    }
}

// Select option

.cwf-form__option {
    margin-bottom: 0.5rem;
}

.cwf-form__option--inline .cwf-form__input,
.cwf-form__option--inline .cwf-form__label {
    display: inline;
    width: auto;
}

// Input & symbol

.cwf-form__input,
.cwf-form__symbol {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--cwf-form__input--border-color);
    border-radius: 0.25rem;
}

// Symbol

.cwf-form__symbol {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    color: var(--cwf-form__input--placeholder--color);
}

// Group

.cwf-form__group {
    display: flex;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;

    .cwf-form__input {
        border-radius: 0;
        &:hover,
        &:focus {
            z-index: 2;
        }
    }

    & > * {
        margin: 0;
        margin-right: -1px;
        border-radius: 0;
        z-index: 0;
        &:not(.cwf-form__symbol) {
            flex: 1;
            z-index: 1;
        }
        &:first-child:not(.cwf-form__icon),
        &:first-child .cwf-form__input {
            border-top-left-radius: 0.25rem;
            border-bottom-left-radius: 0.25rem;
        }
        &:last-child:not(.cwf-form__icon),
        &:last-child .cwf-form__input {
            margin-right: 0;
            border-top-right-radius: 0.25rem;
            border-bottom-right-radius: 0.25rem;
        }
    }
}

// Help & validation

.cwf-form__help {
    color: var(--cwf-form__help--color);
    font-style: italic;
}

.cwf-form__help,
.cwf-form__validation {
    font-size: 0.75rem;
    margin-bottom: 0.5rem;
}

// Field status

@mixin form__field--status($status) {
    .cwf-form__field--#{ $status } {
        .cwf-form__icon:before,
        .cwf-form__validation {
            color: var(--cwf-form--#{$status}-color);
        }

        .cwf-form__input {
            border-color: var(--cwf-form--#{$status}-color);
        }
    }
}

@include form__field--status(error);

@include form__field--status(success);

URL: /components/raw/form/_styles.scss
Filesystem Path: src/components/form/_styles.scss
Size: 4.9 KB

Content:


                                <div class="cwf-form__field {{ error ? 'cwf-form__field--error' }}">
    <label for="{{ id }}" class="cwf-form__label">{{ label }}</label>
    {% if help %}
        <p class="cwf-form__help">
            {{ help }}
        </p>
    {% endif %}
    {% if error %}
        <p class="cwf-form__validation">
            {{ error }}
        </p>
    {% endif %}
    {% set input %}
        {% if type == 'textarea' %}
            {% spaceless %}
                <textarea class="cwf-form__input"
                    id="{{ id }}"
                    name="{{ id }}"
                    placeholder="{{ placeholder }}"
                    {{ required ? 'required' }}
                    {{ readonly ? 'readonly' }}
                    {{ disabled ? 'disabled' }}>
                    {{ value }}
                </textarea>
            {% endspaceless %}
        {% else %}
            <input class="cwf-form__input"
                id="{{ id }}"
                name="{{ id }}"
                placeholder="{{ placeholder }}"
                {{ readonly ? 'readonly' }}
                {{ required ? 'required' }}
                {{ disabled ? 'disabled' }}
                type="{{ type }}"
                value="{{ value }}" />
        {% endif %}
    {% endset %}
    {% set inner %}
        {% if icon %}
            <div class="cwf-form__icon {{ icon }}">
                {{ input }}
            </div>
        {% else %}
            {{ input }}
        {% endif %}
    {% endset %}
    {% set outer %}
        {% if group %}
            <div class="cwf-form__group">
                {% if group.start %}
                    <span class="cwf-form__symbol {{ group.start.icon }}">
                        {{ group.start.text }}
                    </span>
                {% endif %}
                {{ inner }}
                {% if group.end %}
                    <span class="cwf-form__symbol {{ group.end.icon }}">
                        {{ group.end.text }}
                    </span>
                {% endif %}
            </div>
        {% else %}
            {{ inner }}
        {% endif %}
    {% endset %}
    {{ outer }}
</div>

URL: /components/raw/form/input.twig
Filesystem Path: src/components/form/input.twig
Size: 2.1 KB

Content:


                                <div class="cwf-form__field {{ error ? 'cwf-form__field--error' }}"
    {{ type != 'select' ? 'id="' ~ id ~ '"' }}
    {{ type != 'select' ? 'role="radiogroup"' }}
    {{ type != 'select' ? 'aria-label="' ~ label ~ '"' }}>
    {% if not hideLabel %}
        <label for="{{ id }}" class="cwf-form__label">{{ label }}</label>
    {% endif %}
    {% if help %}
        <p class="cwf-form__help">
            {{ help }}
        </p>
    {% endif %}
    {% if error %}
        <p class="cwf-form__validation">
            {{ error }}
        </p>
    {% endif %}
    {% if type == 'select' %}
        <div class="cwf-form__icon cwf-form__icon--select">
            <select class="cwf-form__input"
                id="{{ id }}"
                name="{{ id }}"
                {{ required ? 'required' }}>
                {% for option in options %}
                    <option {{ option == value ? 'selected' }}>
                        {{ option }}
                    </option>
                {% endfor %}
            </select>
        </div>
    {% endif %}
    {% if type != 'select' %}
        {% for option in options %}
            <div class="cwf-form__option cwf-form__option--inline">
                <input class="cwf-form__input"
                    id="{{ option.id }}"
                    name="{{ type == 'radio' ? id : option.id }}"
                    type="{{ type }}"
                    {{ option.checked ? 'checked' }} />
                <label class="cwf-form__label" for="{{ option.id }}">
                    {{ option.label }}
                </label>
                {% if option.help %}
                    <p class="cwf-form__help">
                        {{ option.help }}
                    </p>
                {% endif %}
            </div>
        {% endfor %}
    {% endif %}
</div>

URL: /components/raw/form/multi.twig
Filesystem Path: src/components/form/multi.twig
Size: 1.8 KB

Handle: @form--text
Variants (8): All , Text , Grouped , Select , Textarea , Radio , Checkbox , Password
Preview:
- With layout
- Component only
Filesystem Path: src/components/form/form--input.html

There are no notes for this item.