Input

The input component represents an input.

Installation

Copy and paste the following file into your project.

ui/input.hop

<component name="input" as="input" class="shadow-xs rounded-md text-base bg-transparent file:bg-transparent border border-zinc-300 flex h-9 w-full min-w-0 px-3 py-1 outline-none focus-visible:border-zinc-400 focus-visible:ring-zinc-400/50 focus-visible:ring-[3px] transition-[color,box-shadow] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50">
</component>

Usage

main.hop

<import component="input" from="ui/input">

<component name="main">
    <render component="input"></render>
</component>