Input

2.0.0

Requires Celeste 3.0.0

Basic Input Optional

Textarea Optional

With Event Listeners Optional

0 words

Install or Update

wp celeste pull component Input

Dependencies will automatically be installed.

Properties

Prop	Description
`name`	Input name
`id`	Unique ID, if not set, name will be used as the ID.
`label`	Input label
`type`	Input type, any valid HTML text input type
`showLabel`	Whether or not to show the label, defaults to `true`. If set to `false`, the label will still be present, but hidden from sighted users.

Note

Attributes passed to this component will be rendered on the <input> and not on the root element. This lets you listen for input events as usual.

How to use it

<div class="flow">
    <Input name="name" label="Basic Input" />

    <Input name="message" label="Textarea" type="textarea" />

    <div x-data="{ words: 0 }">
        <Input
            name="word_count"
            label="With Event Listeners"
            @input.throttle="words = $event.target.value.split(' ').length"
        />
        <span class="text-sm text-gray-400" x-text="`${words} words`">0 words</span>
    </div>
</div>