Input components

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

Button

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

Variants are automatic, bordered, prominent, plain, and link. Roles are destructive and cancel. Windows currently renders bordered, plain, and link with its default button style.

TextField

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

Set secure for protected entry. On Windows, changing secure after creation is not supported.

Toggle

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

Styles are automatic, checkbox, and switch. Changing style after creation is not supported on Windows.

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. Changing style after creation is not supported on Windows.

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 currently uses a date-only control. A dateTime value is accepted, displays its date portion, and emits YYYY-MM-DD. A time value in HH:mm form cannot be parsed by that control, so it leaves the current native date unchanged and cannot emit a time-only value.

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.