2 files changed, 28 insertions, 0 deletions
diff --git a/packages/ui/src/components/inline-input.css b/packages/ui/src/components/inline-input.css
new file mode 100644
index 000000000..1d8a00e08
--- /dev/null
+++ b/packages/ui/src/components/inline-input.css
@@ -0,0 +1,17 @@
+[data-component="inline-input"] {
+  color: inherit;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-md);
+  padding: 0;
+  min-width: 0;
+  font: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+  box-sizing: border-box;
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 1px var(--border-interactive-focus);
+  }
+}
diff --git a/packages/ui/src/components/inline-input.tsx b/packages/ui/src/components/inline-input.tsx
new file mode 100644
index 000000000..72711a197
--- /dev/null
+++ b/packages/ui/src/components/inline-input.tsx
@@ -0,0 +1,11 @@
+import type { ComponentProps } from "solid-js"
+import { splitProps } from "solid-js"
+
+export type InlineInputProps = ComponentProps<"input"> & {
+  width?: string
+}
+
+export function InlineInput(props: InlineInputProps) {
+  const [local, others] = splitProps(props, ["class", "width"])
+  return <input data-component="inline-input" class={local.class} style={{ width: local.width }} {...others} />
+}