Input · CropWatch UI

CwInput

All input types, validation states, icon slots, clear button, numeric stepping with arrow-key support, native color picking, and DevEUI/credit-card formatting.

Input types

Text

Numeric

Password

Accent Color

DevEUI

<CwInput
	label="Email"
	type="email"
	placeholder="user@example.com"
	bind:value={email}
	clearable
/>

Sizes

size uses the shared control heights (32 / 40 / 48px), so inputs line up with buttons, dropdowns and other controls of the same size.

Small

Medium (default)

Large

Hint, required & read-only

hint and error share the slot under the field and are linked with aria-describedby. required adds a visual marker and aria-required.

Gateway name

Shown on the dashboard and in alerts.

Device ID

Assigned automatically.

Custom labels

Button labels are overridable for localisation.

Credit Card Types

Card Number

Expiry (MM/YY)

Max Length & Clear Button

The clear button appears when clearable is set and the input has a value.

Max 10 chars

Clearable

Validation States

Validation icons auto-render on the right side.

Valid

Error

This field is required

Disabled

With Icon Slots

Left icon

Left icon + valid

Left icon + error

Invalid entry

API

Usage and API reference

CwInput is a single component that covers standard text fields plus CropWatch-specific formatting helpers like DevEUI, credit card, and expiry input. The parent still owns the value through normal binding.

How to think about it

Choose the input type deliberately Use the specialized types only when you want the built-in formatting behavior. Otherwise stay with plain `text`, `email`, or `password`.
Tune numeric stepping when precision matters `numeric` fields render inline up/down controls, respond to `ArrowUp` and `ArrowDown` while focused, and optionally respect `step`, `min`, and `max`.
Use validation props for field-level feedback `error` and `valid` control the right-side validation icon and the helper message under the field.
Reach for slots before custom wrappers `leftSlot` and `rightSlot` are the intended extension points for icons and inline actions.

Props and callbacks

Standard input attributes such as `name`, `required`, `autocomplete`, `aria-*`, and `class` pass through to the real `<input>`.

API	Type	Details
`type` Default: `text`	`'text' \| 'numeric' \| 'email' \| 'password' \| 'color' \| 'devEui' \| 'creditCard' \| 'cardExpiry'`	Input behavior and optional formatting mode.
`value` Default: `''`	`string`	Current field value.
`label`	`string`	Field label text.
`placeholder`	`string`	Prompt shown when the field is empty.
`error`	`string`	Validation message shown under the field.
`valid` Default: `false`	`boolean`	Shows the success state when there is no error.
`disabled` Default: `false`	`boolean`	Disables typing and interactive affordances.
`maxlength`	`number`	Character cap applied after formatting.
`min / max`	`number \| string`	Optional numeric bounds used by the inline stepper and keyboard increment/decrement.
`step`	`number \| string`	Optional numeric increment for `type="numeric"`. When omitted, the field infers precision from the current value.
`clearable` Default: `false`	`boolean`	Shows the clear button when the field has a value.
`leftSlot / rightSlot`	`Snippet`	Custom inline icon or action content.
`oninput / onchange / onkeydown / onblur / onfocus`	`callback`	Standard input lifecycle callbacks forwarded from the field.
`size` Default: `'md'`	`'sm' \| 'md' \| 'lg'`	Control height and font scale, shared with CwButton and every other form control.
`hint`	`string`	Helper text under the field. Replaced by `error` when both are set.
`required` Default: `false`	`boolean`	Shows a required marker and sets `aria-required` on the control.
`readonly` Default: `false`	`boolean`	Read-only state with a muted fill.
`labels`	`{ clear?; showPassword?; hidePassword?; increase?; decrease? }`	Accessible labels for the built-in buttons, for localisation.

Copy-paste examples

Each snippet is a complete, working example you can paste into a Svelte 5 component.

Clearable email field

A standard text field with form-friendly attributes and built-in clear behavior.

<script lang="ts">
	let email = $state('');
</script>

<CwInput
	label="Email"
	type="email"
	name="email"
	required
	placeholder="grower@example.com"
	autocomplete="email"
	clearable
	bind:value={email}
/>

Color picker plus formatted inputs

Use the native color control or the specialized formatted types when you need them.

<script lang="ts">
	let devEui = $state('');
	let accentColor = $state('#2f8f5b');
	let threshold = $state('18.5');
	let cardNumber = $state('');
	let expiry = $state('');
</script>

<CwInput
	label="Threshold"
	type="numeric"
	step={0.5}
	min={0}
	max={40}
	bind:value={threshold}
/>

<CwInput
	label="Accent color"
	type="color"
	bind:value={accentColor}
/>

<CwInput
	label="Device EUI"
	type="devEui"
	placeholder="AA:BB:CC:DD:EE:FF:00:11"
	bind:value={devEui}
/>

<CwInput
	label="Card number"
	type="creditCard"
	maxlength={19}
	clearable
	bind:value={cardNumber}
/>

<CwInput label="Expiry" type="cardExpiry" bind:value={expiry} />

Icon slots and validation feedback

Slots are the extension point for search icons, units, and inline actions.

<CwInput label="Search plots" clearable error="Pick an existing plot">
	{#snippet leftSlot()}
		<svg viewBox="0 0 16 16" fill="none" style="width:1rem;height:1rem">
			<path d="M7 3a4 4 0 110 8 4 4 0 010-8zm4.5 7.5L14 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
		</svg>
	{/snippet}
	{#snippet rightSlot()}
		<span style="font-size:0.75rem;color:var(--cw-text-muted)">Ctrl+K</span>
	{/snippet}
</CwInput>