Input

Basic

A placeholder is not a label: name the field with a Field, aria-label, or aria-labelledby.

Inside a Field

ENDPOINT

With error (Field-driven)

ENDPOINT

Required field

Sizes

With prompt symbol

With prefix and suffix

A prefix or suffix too long for the field wraps in its own column and the field grows taller, while what is typed keeps about ten characters of room. A one-line field keeps its exact height.

https://.io

Date and time

Native date, time, and datetime-local fields use OPERATOR's Calendar and Clock icons. The icons are decorative overlays: clicks still reach the native picker, and native keyboard editing remains available. The fields declare a dark color scheme for browser-owned controls.

Date

Time

Invalid

invalid draws the error border and sets aria-invalid, as on Textarea, Select, and ComboBox. It wins over aria-invalid, which wins over a surrounding Field's error.

Disabled

A disabled field keeps its value readable: dim text on a muted fill, with the control outline, and no fade.

https://

Props

PROP	TYPE	DEFAULT	REQUIRED
`type` The text-like and date-like input types. TypeScript accepts any HTML input type, but one that is not a text field (checkbox, radio, file, range, color, hidden, button, submit, reset, image) breaks the field's look and is reported in development; use Checkbox, RadioGroup, Slider or FileUpload instead.	`enum` text \| number \| password \| search \| email \| tel \| url \| date \| time \| datetime-local \| month \| week	`"text"`	no
`size`	`enum` sm \| md \| lg	`"md"`	no
`placeholder`	`string`	—	no
`disabled`	`boolean`	`false`	no
`invalid` Marks the field invalid: an error border and aria-invalid. Wins over aria-invalid, which wins over a surrounding Field's error, as on Textarea.	`boolean`	—	no
`promptSymbol`	`boolean`	`false`	no
`prefix` ReactNode rendered before the input (icon, currency symbol, etc.).	`node`	—	no
`suffix` ReactNode rendered after the input (icon, clear button, unit, etc.). For interactive elements use an accessible Button or icon-button.	`node`	—	no

Accessibility

Native input semantics; the wrapper has a shared focus indicator.
A placeholder is not a label; name the field with Field, aria-label, or aria-labelledby.
Inherits id, aria-describedby, aria-invalid, and required from Field.
The field outline is the control outline (--oprt-border-control, 3:1 or more).
The field takes the width its container gives it and can shrink in a narrow row; it never widens its container.
Give actionable prefix/suffix controls, such as a clear button, explicit accessible labels.

Manifest entry

<Field label="ENDPOINT">
  <Input placeholder="api.system.io" />
</Field>

View agent manifest

{
  "description": "Single-line input with optional prefix/suffix slots and prompt-symbol variant. Date and time fields preserve native editing and picker interaction with decorative OPERATOR Calendar/Clock icons and a dark native color scheme.",
  "props": {
    "type": {
      "type": "enum",
      "values": [
        "text",
        "number",
        "password",
        "search",
        "email",
        "tel",
        "url",
        "date",
        "time",
        "datetime-local",
        "month",
        "week"
      ],
      "default": "text",
      "description": "The text-like and date-like input types. TypeScript accepts any HTML input type, but one that is not a text field (checkbox, radio, file, range, color, hidden, button, submit, reset, image) breaks the field's look and is reported in development; use Checkbox, RadioGroup, Slider or FileUpload instead."
    },
    "size": {
      "type": "enum",
      "values": [
        "sm",
        "md",
        "lg"
      ],
      "default": "md"
    },
    "placeholder": {
      "type": "string"
    },
    "disabled": {
      "type": "boolean",
      "default": false
    },
    "invalid": {
      "type": "boolean",
      "description": "Marks the field invalid: an error border and aria-invalid. Wins over aria-invalid, which wins over a surrounding Field's error, as on Textarea."
    },
    "promptSymbol": {
      "type": "boolean",
      "default": false
    },
    "prefix": {
      "type": "node",
      "description": "ReactNode rendered before the input (icon, currency symbol, etc.)."
    },
    "suffix": {
      "type": "node",
      "description": "ReactNode rendered after the input (icon, clear button, unit, etc.). For interactive elements use an accessible Button or icon-button."
    }
  },
  "composable_with": [
    "Field"
  ],
  "never_inside": [
    "Button",
    "Badge"
  ],
  "example": "<Field label=\"ENDPOINT\">\n  <Input placeholder=\"api.system.io\" />\n</Field>"
}