All componentssmmdlg
Editable
Inline text that swaps between a hover preview and a focused input on click.
Q3 launch plan
Sizes
Q3 launch plan
Q3 launch plan
Q3 launch plan
Install
zsh — editable
1bunx stylexblocks add editableUsage — Base UI
editable.tsx
1234567891011121314import { Editable } from "#components/ui/base-ui/editable.tsx";
export function Example() { return ( // Base UI has no editable machine, so Root owns the value/editing state // (value/defaultValue/onValueChange); parts compose through render <Editable.Root defaultValue="Q3 launch plan" size="md"> <Editable.Area> <Editable.Input aria-label="Edit title" /> <Editable.Preview /> </Editable.Area> </Editable.Root> );}