Inputs

DIL source

{@body const [name, setName] = DIL.useState("Ada")}
{@body const [notifications, setNotifications] = DIL.useState(true)}
<box border padding={5} radius="xl" gap={4}>
  <title size="xl">Make yourself at home.</title>
  <label>Display name</label>
  <input
    aria-label="Display name"
    value={name}
    onChange={setName}
  />
  <checkbox checked={notifications} onChange={setNotifications}>
    Send me release updates
  </checkbox>
  <box
    background="surface-secondary"
    radius="lg"
    padding={4}
    gap={2}
  >
    <title>Welcome, {name || "friend"}.</title>
    <text color="secondary">Release updates are {notifications ? "on" : "off"}.</text>
  </box>
</box>

Tag	Attributes	Callback value
input	value, onChange, placeholder, aria-label, disabled	String.
slider	value, onChange, min, max, step, marks, aria-label, disabled	Number.
checkbox	checked, onChange, disabled, lineThrough; children supply its label	Boolean.
radio-group	value, onChange, direction, aria-label; contains radio children	Selected string.
radio	value; children supply its label	Selection is handled by its group.

segmented-control accepts options objects such as { value: "eu", label: "Europe" }. Slider marks use { label: "…" } entries. Callback arguments are DIL values, not browser events. Set lineThrough={false} when a checkbox represents a preference rather than a completed task.

Provide explicit aria-label values for inputs, sliders, and groups. A placeholder is not a persistent label. Controls retain their native edit feedback while the worker updates dependent output, and remain disabled until their definition is ready.