EssentialsFree component
Input field
A text field with a floating label, validation messages, and optional clear action. Keep every input state easy to understand.
Preview
Open previewInstallation
Add input field to your project, then make it your own.
shadcnRun in your terminal
npx shadcn add https://menaceui.com/r/menace-input-field.jsonUsage
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"
/>Props
Key options and their defaults.
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.