twenty-ui/primitives/input. See Getting started for installation and theme setup.
All existing UI controls belong to the primitives layer, including controls still being migrated to the new API. Components are reserved for larger, reusable app building blocks composed from these primitives.
State ownership
Use uncontrolled state when a component can manage its own interactions. A default prop supplies the initial state. Use controlled state when the application needs to coordinate that state with other controls, navigation, or application data.
In controlled mode, pass the current state and update it in the change callback. In uncontrolled mode, you can still listen to changes without taking ownership of the state. Adding a callback alone does not make a component controlled.
Choose a mode for each state and keep it for the lifetime of the component. Default props initialize state; changing them later does not replace the current state. Avoid passing both the default and controlled prop for the same state.
Some components have more than one independent state. For example, Select can have a controlled value and uncontrolled popup visibility. Menu can manage its own visibility while the application controls checkbox and radio selections.
State belongs to the part that manages the interaction. Configure radio selection on RadioGroup, not on each Radio. Display components such as Text do not have a controlled or uncontrolled mode. Toast delegates its visibility and removal to the application.