DocsDocsSDKs

Input

React SDK guidance for Input.

Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

When to use it

Use Input for search, form fields, and inline edits where the SDK should keep spacing, focus treatment, and invalid states consistent.

Choose outlined when the field needs a clear boundary inside a longer form. Choose plain when the field sits inside a denser toolbar, filter row, or lightweight editorial surface.

Keep the recipe, swap the context

Most teams do not need a custom text field. Keep the shared input recipe, then change label layout, helper copy, and surrounding spacing to fit the page.

Composition notes

  • Use startSlot and endSlot for icons, shortcuts, or compact status markers.
  • Keep decorators presentational. Screen reader labels and helper copy should stay outside the slot content.
  • Pair the field with Label, helper text, and error text in the surrounding layout instead of trying to bake those concerns into the input itself.

State and theming guidance

Input already includes focus, disabled, and invalid states. Prefer semantic tokens like --radius, --enad-input-height, and --enad-input-px over one-off utility overrides so the field stays aligned with the rest of the control system.

If a surface needs a lower-emphasis treatment, switch to variant="plain" before replacing borders or padding by hand. That keeps the behavior consistent while letting the page feel lighter.

Contract scope

  • Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
  • Public import: @enadhq/enad-react-sdk/client/ui-resolver.
  • Playground route: /sandbox?component=Input.
  • Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes

Input

# Input > Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe. Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior. ## Playground - Import path: `@enadhq/enad-react-sdk/client/ui-resolver`. - Live playground: [/components/base-ui/input](https://sdk.enad.io/components/base-ui/input). ## When to use it Use `Input` for search, form fields, and inline edits where the SDK should keep spacing, focus treatment, and invalid states consistent. Choose `outlined` when the field needs a clear boundary inside a longer form. Choose `plain` when the field sits inside a denser toolbar, filter row, or lightweight editorial surface. > **Keep the recipe, swap the context** > > Most teams do not need a custom text field. Keep the shared input recipe, then change label > layout, helper copy, and surrounding spacing to fit the page. ## Composition notes - Use `startSlot` and `endSlot` for icons, shortcuts, or compact status markers. - Keep decorators presentational. Screen reader labels and helper copy should stay outside the slot content. - Pair the field with `Label`, helper text, and error text in the surrounding layout instead of trying to bake those concerns into the input itself. ## State and theming guidance `Input` already includes focus, disabled, and invalid states. Prefer semantic tokens like `--radius`, `--enad-input-height`, and `--enad-input-px` over one-off utility overrides so the field stays aligned with the rest of the control system. If a surface needs a lower-emphasis treatment, switch to `variant="plain"` before replacing borders or padding by hand. That keeps the behavior consistent while letting the page feel lighter. ## Contract scope - Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior. - Public import: `@enadhq/enad-react-sdk/client/ui-resolver`. - Playground route: /sandbox?component=Input. - Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference. ### Implementation notes