All components
Available nowReact

Input field

A composed field with labels, hints, validation, and leading actions.

shadcnRegistry install command
npx shadcn add http://localhost:3000/r/menace-input-field.json

Preview

Live component behavior

Interactive
Preview size
desktop

Workspace identity

menace-studio.menace.build is available13/28

Use it in context.

Copy the component into your project, then adapt the source to the interface around it.

TSXUsage example
import { MenaceInputField } from "@/components/menace/input-field";

<MenaceInputField
  clearable
  label="Workspace address"
  leading={<GlobeIcon />}
  message="signal-house.menace.build is available"
  showCount
  status="success"
/>

API and behavior

labelrequired
Accessible label and floating visual label for the input.
status / messageidle
Validation state and contextual support text.
leading / trailingundefined
Composable visual adornments around the input value.
onValueChangeundefined
Receives the next string value for controlled workflows.
  • Supports controlled and uncontrolled values without duplicating form state.
  • Animated checking, success, and error states keep aria-invalid and support text synchronized.
  • Floating labels remain visible when populated, and all motion respects reduced-motion preferences.