Component field guide

Explore live variants, compare states, and learn every prop. Pick a component to start.

LIVE COMPONENT

WelkInput

A labeled native text-like input with comic framing. Supports common text types and an optional end-action button, such as showing a password or clearing a search. Keep controlled value and onChange in sync.

Hero name

Usage

React / TSX

import { WelkInput } from "@welkui/react";

<WelkInput label="Hero name" placeholder="Captain Welk" />

Import @welkui/react/styles.css once in your app. Stateful snippets belong inside a React component.

Variants and behavior

Types: text (default), email, password, search, tel, url.
Optional endAction adds an independently labeled icon button.

Visual variant gallery

These are real components, not screenshots. Compare their appearance and try the controls. Key props below each preview show what changes; use the usage example above for imports and component setup.

text

Native text behavior with a visible label. Validation and mobile keyboard behavior follow the input type.

text example

Key propstype="text"

email

Native email behavior with a visible label. Validation and mobile keyboard behavior follow the input type.

email example

Key propstype="email"

password

Native password behavior with a visible label. Validation and mobile keyboard behavior follow the input type.

password example

Key propstype="password"

search

Native search behavior with a visible label. Validation and mobile keyboard behavior follow the input type.

search example

Key propstype="search"

tel

Native tel behavior with a visible label. Validation and mobile keyboard behavior follow the input type.

tel example

Key propstype="tel"

url

Native url behavior with a visible label. Validation and mobile keyboard behavior follow the input type.

url example

Key propstype="url"

End action

Use the trailing action to show or hide the password without changing its value.

Secret identity

Key propsendAction={{ icon, label, onClick }}

Disabled

Native disabled field; excluded from form submission.

Locked identity

Key propsdisabled

Read only

The value can still be focused and copied, but not edited.

Assigned identity

Key propsreadOnly

Usage notes and accessibility

Use a visible label even if you also provide a placeholder. Placeholder text is a hint, not an accessible label or a replacement for instructions.
Choose the correct type for browser validation and mobile keyboard behavior. Use autoComplete, required and name when building real forms.
Controlled text fields use value/onChange. End actions need their own descriptive label; for example, toggle a password's visibility without submitting the form.
Use readOnly when a value should remain focusable and copyable; use disabled when the field must be unavailable and excluded from submission.

Props

Required props are marked in the default column. Other props are optional. ReactNode accepts text or JSX.

WelkInput prop reference
Prop	Type	Default	Description
`label`	`ReactNode`	Required	Visible, accessible control label.
`type`	`"text" \| "email" \| "password" \| "search" \| "tel" \| "url"`	"text"	Native text-input behavior.
`endAction`	`{ icon: ReactNode; label: string; onClick: MouseEventHandler<HTMLButtonElement>; disabled?: boolean }`	Unset	Optional trailing action; label names the icon button.
`value / defaultValue`	`Native input value`	Native defaults	Controlled or initial input content.
`onChange`	`ChangeEventHandler<HTMLInputElement>`	Unset	Native text change event.

Native props and refs

Inherits native input props except the fields replaced by this component's API: name, id, disabled, required, form, onBlur, onFocus, className, style, aria-* and data-* are supported. Forwards an input ref. children is omitted and type is restricted to the listed text-like types.

Project setup, styling and Next.js

Import @welkui/react/styles.css once in your app entry or Next.js root layout. The previews use the default theme; override --welk-* CSS tokens in your app to customize it.

For Next.js, put hooks and event handlers in a component beginning with "use client". Keep state local to the component using the control. The library preserves its client boundaries and uses your installed React version.

Use defaultValue or defaultChecked for uncontrolled fields, or a state value and its change callback for controlled fields. Do not switch between these modes during the lifetime of a field.

Modal and notification examples start closed: use their Try buttons to see them. Disabled examples are deliberately non-interactive. Validate forms, uploads, authentication, and server responses in your application; these components only provide UI.