input

Fragment reference input

tags

ui

Inputs collect data from the user.

Usage

Basic input with label

puguiinput wa-input-basic

input(label="Name")

Types

The type attribute controls the type of input the browser renders.

Input type variants

puguiinput wa-input-types

input(label="Email" type="email")
input(label="Date" type="date")

Options

Add interactive features with shorthand attributes.

Input with clear button and password toggle

puguiinput wa-input-options

input(label="Nickname" placeholder="What should we call you?" with-clear)
input(label="Password" type="password" password-toggle)

Sizes

Use the size attribute to change an input’s size.

Input size scale

puguiinput wa-input-sizes

input(label="Small" size="small")
input(label="Medium" size="medium")
input(label="Large" size="large")

Attributes

Name	Type	Default	Description
label	string	-	The input label.
placeholder	string	-	Placeholder text.
type	text | email | number | password | date	text	Input type.
size	small | medium | large	medium	Input size.
disabled	boolean	false	Prevents interaction.
required	boolean	false	Marks as required.
with-clear	boolean	false	Shows a clear button.
password-toggle	boolean	false	Shows a toggle button for password visibility.