Kern Component Library GitHub

Input

Text-like form control with optional before/after slots, help text, and error messaging.

Examples

Default preview

Default + help text

We'll only use this for account updates.

Before/after slots

Public profile handle.

Error + disabled

Password must be at least 12 characters.

This field is managed by your organization admin. 

<div class="space-y-8">

    <section class="space-y-4">

        {{ partial:docs/components/label content="Default + help text" }}

        <div class="grid gap-4 md:grid-cols-2">

            {{ partial:components/forms/input name="first_name" placeholder="Ada" }}

                {{ slot:label }}First name{{ /slot:label }}

            {{ /partial:components/forms/input }}



            {{ partial:components/forms/input name="email" type="email" placeholder="name@kern.dev" }}

                {{ slot:label }}Email{{ /slot:label }}

                {{ slot:help }}We'll only use this for account updates.{{ /slot:help }}

            {{ /partial:components/forms/input }}

        </div>

    </section>



    <section class="space-y-4">

        {{ partial:docs/components/label content="Before/after slots" }}

        <div class="grid gap-4 md:grid-cols-2">

            {{ partial:components/forms/input name="amount" type="number" value="120" placeholder="0" }}

                {{ slot:label }}Amount{{ /slot:label }}

                {{ slot:before }}CHF{{ /slot:before }}

                {{ slot:after }}.00{{ /slot:after }}

            {{ /partial:components/forms/input }}



            {{ partial:components/forms/input name="username" placeholder="kern-user" }}

                {{ slot:label }}Username{{ /slot:label }}

                {{ slot:before }}@{{ /slot:before }}

                {{ slot:help }}Public profile handle.{{ /slot:help }}

            {{ /partial:components/forms/input }}

        </div>

    </section>



    <section class="space-y-4">

        {{ partial:docs/components/label content="Error + disabled" }}

        <div class="grid gap-4 md:grid-cols-2">

            {{ partial:components/forms/input name="password" type="password" error="true" value="short" }}

                {{ slot:label }}Password{{ /slot:label }}

                {{ slot:error }}Password must be at least 12 characters.{{ /slot:error }}

            {{ /partial:components/forms/input }}



            {{ partial:components/forms/input name="company" value="Kern Labs" disabled="true" }}

                {{ slot:label }}Company{{ /slot:label }}

                {{ slot:help }}This field is managed by your organization admin.{{ /slot:help }}

            {{ /partial:components/forms/input }}

        </div>

    </section>

</div>

Props

Name Type Default Description
name string Name attribute used for form submissions (and id when present)
type string text Input type (text, email, password, search, ...)
value string Input value
placeholder string Placeholder text
disabled boolean false Disabled state
error boolean false Enables destructive visual state
class string Additional classes merged via tw_merge (root element only)

Source

{{#

    @name Input

    @desc Text-like form control with optional before/after slots, help text, and error messaging.

    @param name string - Name attribute used for form submissions (and id when present)

    @param type string [text] - Input type (text, email, password, search, ...)

    @param value string - Input value

    @param placeholder string - Placeholder text

    @param disabled boolean [false] - Disabled state

    @param error boolean [false] - Enables destructive visual state

    @param class string - Additional classes merged via tw_merge (root element only)

#}}

{{ _label_slot = slot:label }}

{{ _help_slot = slot:help }}

{{ _error_slot = slot:error }}

{{ _before_slot = slot:before }}

{{ _after_slot = slot:after }}

{{ _type = type ?? 'text' }}

{{ _field_id = name ?? '' }}

{{ _input_classes = 'h-10 min-w-0 flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed disabled:text-muted-foreground'

 | tw_merge }}

{{ partial:components/forms/_field-wrapper for="{_field_id}" error="{error}" disabled="{disabled}" class="{class}" }}

    {{ if _label_slot }}

        {{ slot:label }}

            {{ _label_slot }}

        {{ /slot:label }}

    {{ /if }}

    {{ if _help_slot }}

        {{ slot:help }}

            {{ _help_slot }}

        {{ /slot:help }}

    {{ /if }}

    {{ if _error_slot }}

        {{ slot:error }}

            {{ _error_slot }}

        {{ /slot:error }}

    {{ /if }}

    <div class="flex h-10 items-center gap-2 px-3">

        {{ if _before_slot }}

            <span class="text-muted-foreground flex shrink-0 items-center text-sm" aria-hidden="true">

                {{ _before_slot }}

            </span>

        {{ /if }}

        <input

            class="{{ _input_classes }}"

            type="{{ _type }}"

            {{ if name }}name="{{ name }}" id="{{ _field_id }}"{{ /if }}

            value="{{ value }}"

            placeholder="{{ placeholder }}"

            {{ if disabled }}disabled{{ /if }}

            {{ if error }}aria-invalid="true"{{ /if }}

        />

        {{ if _after_slot }}

            <span class="text-muted-foreground flex shrink-0 items-center text-sm" aria-hidden="true">

                {{ _after_slot }}

            </span>

        {{ /if }}

    </div>

{{ /partial:components/forms/_field-wrapper }}

Dependencies

Packages

marcorieser/tailwind-merge-statamic

composer require marcorieser/tailwind-merge-statamic

Internal dependencies