Input

Inputs collect short freeform text and should stay visually aligned with surrounding controls.

Basic Usage

Use a placeholder for empty guidance and value when the control should open with an existing value.

Sizes

The input size scale matches adjacent buttons, selects, and other field controls so dense CP layouts still line up cleanly.

Widths

Inputs are full-width by default. Constrain the parent for field layouts, or set an explicit width when the input needs to be fixed.

Validation

Use invalid when the current value has failed validation so the field can surface its error state consistently.

Disabled

Disable the field when it is present for context but not currently editable.

Adornments

Use slot="start" / slot="end" for icons or short units inside the field border. Prefer this for a single leading/trailing glyph (search, currency). Use input groups when the adornment is a separate control (button, select) or multi-part addon.

<Input placeholder="Search">
  <Icon slot="start" icon="magnifying-glass"></Icon>
</Input>

API

Slots

Name	Description
label	—
instructions	—
hint	Alias for instructions
start	Leading adornment inside the field control (icon, unit, etc.)
end	Trailing adornment inside the field control (icon, unit, or in-control action such as pk-copy-button)
clear-icon	—

Props

Name	Description
autocomplete	Type string | undefined
autofocus	Type boolean Default false
customError	Custom validation message; also settable via setCustomValidity(). Type string | null Default null
defaultValue	Type string | null Default null
disabled	Disables the control and excludes it from constraint validation. Type boolean Default false
fitCell	Flush + fill parent cell (editable tables). Type boolean Default false
instructions	Type string
invalid	Type boolean Default false
isInvalid	Alias for invalid.
label	Type string
max	Type number | string | undefined
maxlength	Type number | undefined
min	Type number | string | undefined
minlength	Type number | undefined
mono	Monospace typography for handle, slug, and code-like values. Type boolean Default false
name	Name submitted with form data. Type string | null Default null
pattern	Type string | undefined
placeholder	Type string
readonly	Type boolean Default false
readOnly	Alias for readonly.
required	Marks the control as required for form submission. Type boolean Default false
size	Type PkInputSize Default default
step	Type number | 'any' | undefined
type	Type string Default text
withClear	Type boolean Default false
withInstructions	Type boolean Default false
withLabel	Type boolean Default false

Methods

Name	Description
checkValidity()	Runs constraint validation without showing the browser UI.
reportValidity()	Runs constraint validation and shows the browser UI when invalid.
resetValidity()	Clears custom errors and re-syncs validity state.
setCustomValidity(message: string)	Sets or clears a custom validation message.

Events

Name	Description
@blur	—
@change	—
@focus	—
@input	—

Custom States

Name	Description	CSS selector
disabled	The control is disabled.	:state(disabled)
invalid	The control currently fails constraint validation.	:state(invalid)
optional	The control is not required.	:state(optional)
required	The control is required.	:state(required)
user-invalid	Invalid after the user has interacted with the control.	:state(user-invalid)
user-valid	Valid after the user has interacted with the control.	:state(user-valid)
valid	The control currently passes constraint validation.	:state(valid)

CSS Parts

Name	Description	CSS selector
base	Input row	::part(base)
clear-button	Clear button	::part(clear-button)
end	End slot container	::part(end)
form-control	Wrapper	::part(form-control)
input	Native input	::part(input)
instructions	Instructions	::part(instructions)
label	Label	::part(label)
start	Start slot container	::part(start)