Control

Docs & Examples

• winduum

Source

• Control.css
• Control.js

Example

<div class="x-control">
    <input type="text">
</div>

Stimulus Actions

stepDown

Triggers native stepDown method on input.

Example

<div class="x-control" data-controller="x-control">
    <input type="number" min="0" value="10">
    <div class="me-auto">
        <svg role="button" data-action="click->x-control#stepDown" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
        </svg>
    </div>
</div>

stepUp

Triggers native stepUp method on input.

Example

<div class="x-control" data-controller="x-control">
    <input type="number" min="0" value="0">
    <div class="ms-auto">
        <svg role="button" data-action="click->x-control#stepUp" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
        </svg>
    </div>
</div>

showPicker

Triggers native showPicker method on input.

Example

<div class="x-control" data-controller="x-control">
    <input type="date">
    <div class="ms-auto">
        <svg class="size-6" role="button" data-action="click->x-control#showPicker" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5" />
        </svg>
    </div>
</div>