Input components

NatUI inputs are controlled React components. Pass the current value and update it in the corresponding event handler.

Button

<Button style="prominent" onPress={save}>Save</Button>

Variants are automatic, bordered, prominent, plain, and link. Roles are destructive and cancel. Windows maps prominent, plain, and link to their native WinUI styles; automatic and bordered use the standard button appearance.

TextField

<TextField
  value={email}
  placeholder="Email"
  onChange={setEmail}
  onSubmit={submit}
/>

Set secure for protected entry. Changing it after creation swaps the native control while preserving the React node.

Toggle

<Toggle value={enabled} style="switch" onChange={setEnabled}>
  Notifications
</Toggle>

Styles are automatic, checkbox, and switch. Style changes replace the native control while preserving the React node.

Slider

<Slider value={volume} min={0} max={100} step={1} onChange={setVolume} />

Picker

<Picker
  label="Size"
  value={size}
  options={[
    { value: 's', label: 'Small' },
    { value: 'm', label: 'Medium' },
  ]}
  style="segmented"
  onChange={setSize}
/>

Styles are automatic, menu, segmented, and radioGroup. Style changes replace the native control while preserving the React node.

SearchField

Provides controlled text with optional placeholder, onChange, and onSubmit.

<SearchField value={query} placeholder="Search" onChange={setQuery} />

DatePicker

Uses a local ISO value without a time zone:

• date: YYYY-MM-DD
• time: HH:mm
• dateTime: YYYY-MM-DDTHH:mm

<DatePicker value={due} displayedComponents="date" onChange={setDue} />

Windows uses native date and time controls, pairing them for dateTime. All three modes parse and emit the canonical local ISO shape documented by DatePickerProps.

Stepper

<Stepper value={quantity} min={1} max={10} step={1} onChange={setQuantity} />

TextEditor

Renders a multiline plain-text editor.

<TextEditor value={notes} onChange={setNotes} frame={{ height: 100 }} />

All controlled input kinds participate in NatUI's sequence acknowledgement protocol.