diff --git a/packages/jsx/src/components/option.ts b/packages/jsx/src/components/option.ts
index 70a56aa..a49b839 100644
--- a/packages/jsx/src/components/option.ts
+++ b/packages/jsx/src/components/option.ts
@@ -1,31 +1,32 @@
-import { type Option, isCancel } from '@clack/prompts';
+import { type Option as PromptOption, isCancel } from '@clack/prompts';
 import type { JSX } from '../types.js';
 import { resolveChildren } from '../utils.js';
 
-export interface OptionProps {
-	value: unknown;
+export interface OptionProps<T> {
+	value: T;
+	hint?: string;
 	children?: JSX.Element | JSX.Element[] | string;
 }
 
-export async function Option(props: OptionProps): Promise<Option<unknown>> {
-	let label = '';
-	if (props.children) {
-		const children = await resolveChildren(props.children);
+export async function Option<T>(props: OptionProps<T>): Promise<PromptOption<T>> {
+	const { children, ...opts } = props;
+
+	if (children) {
+		const resolvedChildren = await resolveChildren(children);
 		const childStrings: string[] = [];
 
-		for (const child of children) {
+		for (const child of resolvedChildren) {
 			if (isCancel(child)) {
 				continue;
 			}
 			childStrings.push(String(child));
 		}
 
-		label = childStrings.join('\n');
-	} else {
-		label = String(props.value);
+		return {
+			...opts,
+			label: childStrings.join('\n'),
+		} as PromptOption<T>;
 	}
-	return {
-		value: props.value,
-		label,
-	};
+
+	return opts as PromptOption<T>;
 }
diff --git a/packages/jsx/src/components/select.ts b/packages/jsx/src/components/select.ts
index 573f158..08c2c10 100644
--- a/packages/jsx/src/components/select.ts
+++ b/packages/jsx/src/components/select.ts
@@ -4,17 +4,11 @@ import type { JSX } from '../types.js';
 import { resolveChildren } from '../utils.js';
 
 export interface SelectProps extends Omit<SelectOptions<unknown>, 'options'> {
-	children: JSX.Element[] | JSX.Element;
+	children: JSX.Element[] | JSX.Element | string;
 }
 
 const isOptionLike = (obj: unknown): obj is Option<unknown> => {
-	return (
-		obj !== null &&
-		typeof obj === 'object' &&
-		Object.hasOwnProperty.call(obj, 'label') &&
-		Object.hasOwnProperty.call(obj, 'value') &&
-		typeof (obj as { label: string }).label === 'string'
-	);
+	return obj !== null && typeof obj === 'object' && Object.hasOwnProperty.call(obj, 'value');
 };
 
 export async function Select(props: SelectProps): ReturnType<typeof select> {
diff --git a/packages/jsx/src/types.ts b/packages/jsx/src/types.ts
index 039efb0..70519da 100644
--- a/packages/jsx/src/types.ts
+++ b/packages/jsx/src/types.ts
@@ -1,5 +1,5 @@
 namespace JSX {
-	export type IntrinsicElements = {};
+	export type IntrinsicElements = never;
 
 	export type Element = Promise<unknown>;
 }
diff --git a/packages/jsx/test/__snapshots__/jsx.test.tsx.snap b/packages/jsx/test/__snapshots__/jsx.test.tsx.snap
deleted file mode 100644
index ca3ee16..0000000
--- a/packages/jsx/test/__snapshots__/jsx.test.tsx.snap
+++ /dev/null
@@ -1,302 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`jsx > Confirm > can set active text 1`] = `
-[
-  "<cursor.hide>",
-  "│
-◆  foo?
-│  ● DO IT / ○ No
-└
-",
-  "<cursor.backward count=999><cursor.up count=4>",
-  "<cursor.down count=1>",
-  "<erase.down>",
-  "◇  foo?
-│  DO IT",
-  "
-",
-  "<cursor.show>",
-]
-`;
-
-exports[`jsx > Confirm > can set inactive text 1`] = `
-[
-  "<cursor.hide>",
-  "│
-◆  foo?
-│  ● Yes / ○ DONT DO IT
-└
-",
-  "<cursor.backward count=999><cursor.up count=4>",
-  "<cursor.down count=1>",
-  "<erase.down>",
-  "◇  foo?
-│  Yes",
-  "
-",
-  "<cursor.show>",
-]
-`;
-
-exports[`jsx > Confirm > can set message 1`] = `
-[
-  "<cursor.hide>",
-  "│
-◆  foo?
-│  ● Yes / ○ No
-└
-",
-  "<cursor.backward count=999><cursor.up count=4>",
-  "<cursor.down count=1>",
-  "<erase.down>",
-  "◇  foo?
-│  Yes",
-  "
-",
-  "<cursor.show>",
-]
-`;
-
-exports[`jsx > Note > can render children as message 1`] = `
-[
-  "│
-◇   ──────────╮
-│             │
-│  a message  │
-│             │
-├─────────────╯
-",
-]
-`;
-
-exports[`jsx > Note > can render complex results as message 1`] = `
-[
-  "<cursor.hide>",
-  "│
-◆  say yes
-│  ● Yes / ○ No
-└
-",
-  "<cursor.backward count=999><cursor.up count=4>",
-  "<cursor.down count=1>",
-  "<erase.down>",
-  "◇  say yes
-│  Yes",
-  "
-",
-  "<cursor.show>",
-  "│
-◇   ─────╮
-│        │
-│  true  │
-│        │
-├────────╯
-",
-]
-`;
-
-exports[`jsx > Note > can render multiple children as message 1`] = `
-[
-  "<cursor.hide>",
-  "│
-◆  say yes
-│  ● Yes / ○ No
-└
-",
-  "<cursor.hide>",
-  "│
-◆  say yes again
-│  ● Yes / ○ No
-└
-",
-  "<cursor.backward count=999><cursor.up count=4>",
-  "<cursor.down count=1>",
-  "<erase.down>",
-  "◇  say yes
-│  Yes",
-  "
-",
-  "<cursor.show>",
-  "<cursor.backward count=999><cursor.up count=4>",
-  "<cursor.down count=1>",
-  "<erase.down>",
-  "◇  say yes again
-│  Yes",
-  "
-",
-  "<cursor.show>",
-  "│
-◇   ─────╮
-│        │
-│  true  │
-│  true  │
-│        │
-├────────╯
-",
-]
-`;
-
-exports[`jsx > Note > can render string message 1`] = `
-[
-  "│
-◇   ────╮
-│       │
-│  foo  │
-│       │
-├───────╯
-",
-]
-`;
-
-exports[`jsx > Password > can set custom mask 1`] = `
-[
-  "<cursor.hide>",
-  "│
-◆  foo
-│  _
-└
-",
-  "<cursor.backward count=999><cursor.up count=4>",
-  "<cursor.down count=2>",
-  "<erase.line><cursor.left count=1>",
-  "│  !_",
-  "<cursor.down count=2>",
-  "<cursor.backward count=999><cursor.up count=4>",
-  "<cursor.down count=2>",
-  "<erase.line><cursor.left count=1>",
-  "│  !!_",
-  "<cursor.down count=2>",
-  "<cursor.backward count=999><cursor.up count=4>",
-  "<cursor.down count=1>",
-  "<erase.down>",
-  "◇  foo
-│  !!",
-  "
-",
-  "<cursor.show>",
-]
-`;
-
-exports[`jsx > Password > renders password input 1`] = `
-[
-  "<cursor.hide>",
-  "│
-◆  foo
-│  _
-└
-",
-  "<cursor.backward count=999><cursor.up count=4>",
-  "<cursor.down count=1>",
-  "<erase.down>",
-  "◇  foo
-│",
-  "
-",
-  "<cursor.show>",
-]
-`;
-
-exports[`jsx > Password > renders user input 1`] = `
-[
-  "<cursor.hide>",
-  "│
-◆  foo
-│  _
-└
-",
-  "<cursor.backward count=999><cursor.up count=4>",
-  "<cursor.down count=2>",
-  "<erase.line><cursor.left count=1>",
-  "│  ▪_",
-  "<cursor.down count=2>",
-  "<cursor.backward count=999><cursor.up count=4>",
-  "<cursor.down count=2>",
-  "<erase.line><cursor.left count=1>",
-  "│  ▪▪_",
-  "<cursor.down count=2>",
-  "<cursor.backward count=999><cursor.up count=4>",
-  "<cursor.down count=1>",
-  "<erase.down>",
-  "◇  foo
-│  ▪▪",
-  "
-",
-  "<cursor.show>",
-]
-`;
-
-exports[`jsx > Text > can set default value 1`] = `
-[
-  "<cursor.hide>",
-  "│
-◆  foo
-│  _
-└
-",
-  "<cursor.backward count=999><cursor.up count=4>",
-  "<cursor.down count=1>",
-  "<erase.down>",
-  "◇  foo
-│  bar",
-  "
-",
-  "<cursor.show>",
-]
-`;
-
-exports[`jsx > Text > can set initial value 1`] = `
-[
-  "<cursor.hide>",
-  "│
-◆  foo
-│  bar█
-└
-",
-  "<cursor.backward count=999><cursor.up count=4>",
-  "<cursor.down count=1>",
-  "<erase.down>",
-  "◇  foo
-│  bar",
-  "
-",
-  "<cursor.show>",
-]
-`;
-
-exports[`jsx > Text > can set placeholder 1`] = `
-[
-  "<cursor.hide>",
-  "│
-◆  foo
-│  bar
-└
-",
-  "<cursor.backward count=999><cursor.up count=4>",
-  "<cursor.down count=1>",
-  "<erase.down>",
-  "◇  foo
-│",
-  "
-",
-  "<cursor.show>",
-]
-`;
-
-exports[`jsx > Text > renders text input 1`] = `
-[
-  "<cursor.hide>",
-  "│
-◆  foo
-│  _
-└
-",
-  "<cursor.backward count=999><cursor.up count=4>",
-  "<cursor.down count=1>",
-  "<erase.down>",
-  "◇  foo
-│",
-  "
-",
-  "<cursor.show>",
-]
-`;
diff --git a/packages/jsx/test/components/__snapshots__/confirm.test.tsx.snap b/packages/jsx/test/components/__snapshots__/confirm.test.tsx.snap
new file mode 100644
index 0000000..896f4a7
--- /dev/null
+++ b/packages/jsx/test/components/__snapshots__/confirm.test.tsx.snap
@@ -0,0 +1,58 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Confirm > can set active text 1`] = `
+[
+  "<cursor.hide>",
+  "│
+◆  foo?
+│  ● DO IT / ○ No
+└
+",
+  "<cursor.backward count=999><cursor.up count=4>",
+  "<cursor.down count=1>",
+  "<erase.down>",
+  "◇  foo?
+│  DO IT",
+  "
+",
+  "<cursor.show>",
+]
+`;
+
+exports[`Confirm > can set inactive text 1`] = `
+[
+  "<cursor.hide>",
+  "│
+◆  foo?
+│  ● Yes / ○ DONT DO IT
+└
+",
+  "<cursor.backward count=999><cursor.up count=4>",
+  "<cursor.down count=1>",
+  "<erase.down>",
+  "◇  foo?
+│  Yes",
+  "
+",
+  "<cursor.show>",
+]
+`;
+
+exports[`Confirm > can set message 1`] = `
+[
+  "<cursor.hide>",
+  "│
+◆  foo?
+│  ● Yes / ○ No
+└
+",
+  "<cursor.backward count=999><cursor.up count=4>",
+  "<cursor.down count=1>",
+  "<erase.down>",
+  "◇  foo?
+│  Yes",
+  "
+",
+  "<cursor.show>",
+]
+`;
diff --git a/packages/jsx/test/components/__snapshots__/note.test.tsx.snap b/packages/jsx/test/components/__snapshots__/note.test.tsx.snap
new file mode 100644
index 0000000..e67dcbb
--- /dev/null
+++ b/packages/jsx/test/components/__snapshots__/note.test.tsx.snap
@@ -0,0 +1,92 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Note > can render children as message 1`] = `
+[
+  "│
+◇   ──────────╮
+│             │
+│  a message  │
+│             │
+├─────────────╯
+",
+]
+`;
+
+exports[`Note > can render complex results as message 1`] = `
+[
+  "<cursor.hide>",
+  "│
+◆  say yes
+│  ● Yes / ○ No
+└
+",
+  "<cursor.backward count=999><cursor.up count=4>",
+  "<cursor.down count=1>",
+  "<erase.down>",
+  "◇  say yes
+│  Yes",
+  "
+",
+  "<cursor.show>",
+  "│
+◇   ─────╮
+│        │
+│  true  │
+│        │
+├────────╯
+",
+]
+`;
+
+exports[`Note > can render multiple children as message 1`] = `
+[
+  "<cursor.hide>",
+  "│
+◆  say yes
+│  ● Yes / ○ No
+└
+",
+  "<cursor.hide>",
+  "│
+◆  say yes again
+│  ● Yes / ○ No
+└
+",
+  "<cursor.backward count=999><cursor.up count=4>",
+  "<cursor.down count=1>",
+  "<erase.down>",
+  "◇  say yes
+│  Yes",
+  "
+",
+  "<cursor.show>",
+  "<cursor.backward count=999><cursor.up count=4>",
+  "<cursor.down count=1>",
+  "<erase.down>",
+  "◇  say yes again
+│  Yes",
+  "
+",
+  "<cursor.show>",
+  "│
+◇   ─────╮
+│        │
+│  true  │
+│  true  │
+│        │
+├────────╯
+",
+]
+`;
+
+exports[`Note > can render string message 1`] = `
+[
+  "│
+◇   ────╮
+│       │
+│  foo  │
+│       │
+├───────╯
+",
+]
+`;
diff --git a/packages/jsx/test/components/__snapshots__/password.test.tsx.snap b/packages/jsx/test/components/__snapshots__/password.test.tsx.snap
new file mode 100644
index 0000000..ca36fd8
--- /dev/null
+++ b/packages/jsx/test/components/__snapshots__/password.test.tsx.snap
@@ -0,0 +1,78 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Password > can set custom mask 1`] = `
+[
+  "<cursor.hide>",
+  "│
+◆  foo
+│  _
+└
+",
+  "<cursor.backward count=999><cursor.up count=4>",
+  "<cursor.down count=2>",
+  "<erase.line><cursor.left count=1>",
+  "│  !_",
+  "<cursor.down count=2>",
+  "<cursor.backward count=999><cursor.up count=4>",
+  "<cursor.down count=2>",
+  "<erase.line><cursor.left count=1>",
+  "│  !!_",
+  "<cursor.down count=2>",
+  "<cursor.backward count=999><cursor.up count=4>",
+  "<cursor.down count=1>",
+  "<erase.down>",
+  "◇  foo
+│  !!",
+  "
+",
+  "<cursor.show>",
+]
+`;
+
+exports[`Password > renders password input 1`] = `
+[
+  "<cursor.hide>",
+  "│
+◆  foo
+│  _
+└
+",
+  "<cursor.backward count=999><cursor.up count=4>",
+  "<cursor.down count=1>",
+  "<erase.down>",
+  "◇  foo
+│",
+  "
+",
+  "<cursor.show>",
+]
+`;
+
+exports[`Password > renders user input 1`] = `
+[
+  "<cursor.hide>",
+  "│
+◆  foo
+│  _
+└
+",
+  "<cursor.backward count=999><cursor.up count=4>",
+  "<cursor.down count=2>",
+  "<erase.line><cursor.left count=1>",
+  "│  ▪_",
+  "<cursor.down count=2>",
+  "<cursor.backward count=999><cursor.up count=4>",
+  "<cursor.down count=2>",
+  "<erase.line><cursor.left count=1>",
+  "│  ▪▪_",
+  "<cursor.down count=2>",
+  "<cursor.backward count=999><cursor.up count=4>",
+  "<cursor.down count=1>",
+  "<erase.down>",
+  "◇  foo
+│  ▪▪",
+  "
+",
+  "<cursor.show>",
+]
+`;
diff --git a/packages/jsx/test/components/__snapshots__/select.test.tsx.snap b/packages/jsx/test/components/__snapshots__/select.test.tsx.snap
new file mode 100644
index 0000000..f5e77f7
--- /dev/null
+++ b/packages/jsx/test/components/__snapshots__/select.test.tsx.snap
@@ -0,0 +1,61 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Select > renders options 1`] = `
+[
+  "<cursor.hide>",
+  "│
+◆  foo
+│  ● opt0
+│  ○ opt1
+└
+",
+  "<cursor.backward count=999><cursor.up count=5>",
+  "<cursor.down count=1>",
+  "<erase.down>",
+  "◇  foo
+│  opt0",
+  "
+",
+  "<cursor.show>",
+]
+`;
+
+exports[`Select > renders options with hints 1`] = `
+[
+  "<cursor.hide>",
+  "│
+◆  foo
+│  ● Three o three (hint one)
+│  ○ Eight o eight
+└
+",
+  "<cursor.backward count=999><cursor.up count=5>",
+  "<cursor.down count=1>",
+  "<erase.down>",
+  "◇  foo
+│  Three o three",
+  "
+",
+  "<cursor.show>",
+]
+`;
+
+exports[`Select > renders options with labels 1`] = `
+[
+  "<cursor.hide>",
+  "│
+◆  foo
+│  ● Three o three
+│  ○ Eight o eight
+└
+",
+  "<cursor.backward count=999><cursor.up count=5>",
+  "<cursor.down count=1>",
+  "<erase.down>",
+  "◇  foo
+│  Three o three",
+  "
+",
+  "<cursor.show>",
+]
+`;
diff --git a/packages/jsx/test/components/__snapshots__/text.test.tsx.snap b/packages/jsx/test/components/__snapshots__/text.test.tsx.snap
new file mode 100644
index 0000000..72a9ace
--- /dev/null
+++ b/packages/jsx/test/components/__snapshots__/text.test.tsx.snap
@@ -0,0 +1,77 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Text > can set default value 1`] = `
+[
+  "<cursor.hide>",
+  "│
+◆  foo
+│  _
+└
+",
+  "<cursor.backward count=999><cursor.up count=4>",
+  "<cursor.down count=1>",
+  "<erase.down>",
+  "◇  foo
+│  bar",
+  "
+",
+  "<cursor.show>",
+]
+`;
+
+exports[`Text > can set initial value 1`] = `
+[
+  "<cursor.hide>",
+  "│
+◆  foo
+│  bar█
+└
+",
+  "<cursor.backward count=999><cursor.up count=4>",
+  "<cursor.down count=1>",
+  "<erase.down>",
+  "◇  foo
+│  bar",
+  "
+",
+  "<cursor.show>",
+]
+`;
+
+exports[`Text > can set placeholder 1`] = `
+[
+  "<cursor.hide>",
+  "│
+◆  foo
+│  bar
+└
+",
+  "<cursor.backward count=999><cursor.up count=4>",
+  "<cursor.down count=1>",
+  "<erase.down>",
+  "◇  foo
+│",
+  "
+",
+  "<cursor.show>",
+]
+`;
+
+exports[`Text > renders text input 1`] = `
+[
+  "<cursor.hide>",
+  "│
+◆  foo
+│  _
+└
+",
+  "<cursor.backward count=999><cursor.up count=4>",
+  "<cursor.down count=1>",
+  "<erase.down>",
+  "◇  foo
+│",
+  "
+",
+  "<cursor.show>",
+]
+`;
diff --git a/packages/jsx/test/components/confirm.test.tsx b/packages/jsx/test/components/confirm.test.tsx
new file mode 100644
index 0000000..2485b1b
--- /dev/null
+++ b/packages/jsx/test/components/confirm.test.tsx
@@ -0,0 +1,37 @@
+import { MockReadable, MockWritable } from '@clack/test-utils';
+import { beforeEach, describe, expect, test } from 'vitest';
+import { Confirm } from '../../src/index.js';
+
+describe('Confirm', () => {
+	let input: MockReadable;
+	let output: MockWritable;
+
+	beforeEach(() => {
+		input = new MockReadable();
+		output = new MockWritable();
+	});
+
+	test('can set message', async () => {
+		const task = <Confirm message="foo?" input={input} output={output} />;
+		input.emit('keypress', '', { name: 'return' });
+		const result = await task;
+		expect(result).to.equal(true);
+		expect(output.buffer).toMatchSnapshot();
+	});
+
+	test('can set active text', async () => {
+		const task = <Confirm message="foo?" active="DO IT" input={input} output={output} />;
+		input.emit('keypress', '', { name: 'return' });
+		const result = await task;
+		expect(result).to.equal(true);
+		expect(output.buffer).toMatchSnapshot();
+	});
+
+	test('can set inactive text', async () => {
+		const task = <Confirm message="foo?" inactive="DONT DO IT" input={input} output={output} />;
+		input.emit('keypress', '', { name: 'return' });
+		const result = await task;
+		expect(result).to.equal(true);
+		expect(output.buffer).toMatchSnapshot();
+	});
+});
diff --git a/packages/jsx/test/components/note.test.tsx b/packages/jsx/test/components/note.test.tsx
new file mode 100644
index 0000000..9c5ba72
--- /dev/null
+++ b/packages/jsx/test/components/note.test.tsx
@@ -0,0 +1,53 @@
+import { MockReadable, MockWritable } from '@clack/test-utils';
+import { beforeEach, describe, expect, test } from 'vitest';
+import { Confirm, Note } from '../../src/index.js';
+
+describe('Note', () => {
+	let input: MockReadable;
+	let output: MockWritable;
+
+	beforeEach(() => {
+		input = new MockReadable();
+		output = new MockWritable();
+	});
+
+	test('can render string message', async () => {
+		const task = <Note message="foo" output={output} />;
+		await task;
+
+		expect(output.buffer).toMatchSnapshot();
+	});
+
+	test('can render children as message', async () => {
+		const task = <Note output={output}>a message</Note>;
+		await task;
+
+		expect(output.buffer).toMatchSnapshot();
+	});
+
+	test('can render complex results as message', async () => {
+		const task = (
+			<Note output={output}>
+				<Confirm message="say yes" input={input} output={output} />
+			</Note>
+		);
+		input.emit('keypress', '', { name: 'return' });
+		await task;
+
+		expect(output.buffer).toMatchSnapshot();
+	});
+
+	test('can render multiple children as message', async () => {
+		const task = (
+			<Note output={output}>
+				<Confirm message="say yes" input={input} output={output} />
+				<Confirm message="say yes again" input={input} output={output} />
+			</Note>
+		);
+		input.emit('keypress', '', { name: 'return' });
+		input.emit('keypress', '', { name: 'return' });
+		await task;
+
+		expect(output.buffer).toMatchSnapshot();
+	});
+});
diff --git a/packages/jsx/test/components/password.test.tsx b/packages/jsx/test/components/password.test.tsx
new file mode 100644
index 0000000..745b3c4
--- /dev/null
+++ b/packages/jsx/test/components/password.test.tsx
@@ -0,0 +1,50 @@
+import { MockReadable, MockWritable } from '@clack/test-utils';
+import { beforeEach, describe, expect, test } from 'vitest';
+import { Password } from '../../src/index.js';
+
+describe('Password', () => {
+	let input: MockReadable;
+	let output: MockWritable;
+
+	beforeEach(() => {
+		input = new MockReadable();
+		output = new MockWritable();
+	});
+
+	test('renders password input', async () => {
+		const task = <Password message="foo" output={output} input={input} />;
+
+		input.emit('keypress', '', { name: 'return' });
+
+		const result = await task;
+
+		expect(result).to.equal(undefined);
+		expect(output.buffer).toMatchSnapshot();
+	});
+
+	test('renders user input', async () => {
+		const task = <Password message="foo" output={output} input={input} />;
+
+		input.emit('keypress', 'a', { name: 'a' });
+		input.emit('keypress', 'b', { name: 'b' });
+		input.emit('keypress', '', { name: 'return' });
+
+		const result = await task;
+
+		expect(result).to.equal('ab');
+		expect(output.buffer).toMatchSnapshot();
+	});
+
+	test('can set custom mask', async () => {
+		const task = <Password message="foo" mask="!" output={output} input={input} />;
+
+		input.emit('keypress', 'a', { name: 'a' });
+		input.emit('keypress', 'b', { name: 'b' });
+		input.emit('keypress', '', { name: 'return' });
+
+		const result = await task;
+
+		expect(result).to.equal('ab');
+		expect(output.buffer).toMatchSnapshot();
+	});
+});
diff --git a/packages/jsx/test/components/select.test.tsx b/packages/jsx/test/components/select.test.tsx
new file mode 100644
index 0000000..d8457ca
--- /dev/null
+++ b/packages/jsx/test/components/select.test.tsx
@@ -0,0 +1,74 @@
+import { MockReadable, MockWritable } from '@clack/test-utils';
+import { beforeEach, describe, expect, test } from 'vitest';
+import { Option, Select } from '../../src/index.js';
+
+describe('Select', () => {
+	let input: MockReadable;
+	let output: MockWritable;
+
+	beforeEach(() => {
+		input = new MockReadable();
+		output = new MockWritable();
+	});
+
+	test('renders options', async () => {
+		const task = (
+			<Select message="foo" input={input} output={output}>
+				<Option value={'opt0'} />
+				<Option value={'opt1'} />
+			</Select>
+		);
+
+		// wait a tick... sad times
+		await new Promise((res) => setTimeout(res, 0));
+
+		input.emit('keypress', '', { name: 'return' });
+
+		const result = await task;
+
+		expect(result).to.equal('opt0');
+		expect(output.buffer).toMatchSnapshot();
+	});
+
+	test('renders options with labels', async () => {
+		const task = (
+			<Select message="foo" input={input} output={output}>
+				<Option value={303}>Three o three</Option>
+				<Option value={808}>Eight o eight</Option>
+			</Select>
+		);
+
+		// wait a tick... sad times
+		await new Promise((res) => setTimeout(res, 0));
+
+		input.emit('keypress', '', { name: 'return' });
+
+		const result = await task;
+
+		expect(result).to.equal(303);
+		expect(output.buffer).toMatchSnapshot();
+	});
+
+	test('renders options with hints', async () => {
+		const task = (
+			<Select message="foo" input={input} output={output}>
+				<Option value={303} hint="hint one">
+					Three o three
+				</Option>
+				<Option value={808} hint="hint two">
+					Eight o eight
+				</Option>
+			</Select>
+		);
+
+		// wait a tick... sad times
+		await new Promise((res) => setTimeout(res, 0));
+
+		input.emit('keypress', '', { name: 'return' });
+
+		const result = await task;
+
+		expect(result).to.equal(303);
+		expect(output.buffer).toMatchSnapshot();
+	});
+});
diff --git a/packages/jsx/test/components/text.test.tsx b/packages/jsx/test/components/text.test.tsx
new file mode 100644
index 0000000..dd5e29d
--- /dev/null
+++ b/packages/jsx/test/components/text.test.tsx
@@ -0,0 +1,57 @@
+import { MockReadable, MockWritable } from '@clack/test-utils';
+import { beforeEach, describe, expect, test } from 'vitest';
+import { Text } from '../../src/index.js';
+
+describe('Text', () => {
+	let input: MockReadable;
+	let output: MockWritable;
+
+	beforeEach(() => {
+		input = new MockReadable();
+		output = new MockWritable();
+	});
+
+	test('renders text input', async () => {
+		const task = <Text message="foo" output={output} input={input} />;
+
+		input.emit('keypress', '', { name: 'return' });
+
+		const result = await task;
+
+		expect(result).to.equal('');
+		expect(output.buffer).toMatchSnapshot();
+	});
+
+	test('can set placeholder', async () => {
+		const task = <Text message="foo" placeholder="bar" output={output} input={input} />;
+
+		input.emit('keypress', '', { name: 'return' });
+
+		const result = await task;
+
+		expect(result).to.equal('');
+		expect(output.buffer).toMatchSnapshot();
+	});
+
+	test('can set default value', async () => {
+		const task = <Text message="foo" defaultValue="bar" output={output} input={input} />;
+
+		input.emit('keypress', '', { name: 'return' });
+
+		const result = await task;
+
+		expect(result).to.equal('bar');
+		expect(output.buffer).toMatchSnapshot();
+	});
+
+	test('can set initial value', async () => {
+		const task = <Text message="foo" initialValue="bar" output={output} input={input} />;
+
+		input.emit('keypress', '', { name: 'return' });
+
+		const result = await task;
+
+		expect(result).to.equal('bar');
+		expect(output.buffer).toMatchSnapshot();
+	});
+});
diff --git a/packages/jsx/test/jsx.test.tsx b/packages/jsx/test/jsx.test.tsx
index d7cab1e..87625e5 100644
--- a/packages/jsx/test/jsx.test.tsx
+++ b/packages/jsx/test/jsx.test.tsx
@@ -1,6 +1,6 @@
 import { MockReadable, MockWritable } from '@clack/test-utils';
 import { beforeEach, describe, expect, test } from 'vitest';
-import { Confirm, Note, Option, Password, Select, Text, jsx } from '../src/index.js';
+import { Confirm, jsx } from '../src/index.js';
 
 describe('jsx', () => {
 	let input: MockReadable;
@@ -34,175 +34,4 @@ describe('jsx', () => {
 		const result = await task;
 		expect(result).to.equal(null);
 	});
-
-	describe('Confirm', () => {
-		test('can set message', async () => {
-			const task = <Confirm message="foo?" input={input} output={output} />;
-			input.emit('keypress', '', { name: 'return' });
-			const result = await task;
-			expect(result).to.equal(true);
-			expect(output.buffer).toMatchSnapshot();
-		});
-
-		test('can set active text', async () => {
-			const task = <Confirm message="foo?" active="DO IT" input={input} output={output} />;
-			input.emit('keypress', '', { name: 'return' });
-			const result = await task;
-			expect(result).to.equal(true);
-			expect(output.buffer).toMatchSnapshot();
-		});
-
-		test('can set inactive text', async () => {
-			const task = <Confirm message="foo?" inactive="DONT DO IT" input={input} output={output} />;
-			input.emit('keypress', '', { name: 'return' });
-			const result = await task;
-			expect(result).to.equal(true);
-			expect(output.buffer).toMatchSnapshot();
-		});
-	});
-
-	describe('Note', () => {
-		test('can render string message', async () => {
-			const task = <Note message="foo" output={output} />;
-			await task;
-
-			expect(output.buffer).toMatchSnapshot();
-		});
-
-		test('can render children as message', async () => {
-			const task = <Note output={output}>a message</Note>;
-			await task;
-
-			expect(output.buffer).toMatchSnapshot();
-		});
-
-		test('can render complex results as message', async () => {
-			const task = (
-				<Note output={output}>
-					<Confirm message="say yes" input={input} output={output} />
-				</Note>
-			);
-			input.emit('keypress', '', { name: 'return' });
-			await task;
-
-			expect(output.buffer).toMatchSnapshot();
-		});
-
-		test('can render multiple children as message', async () => {
-			const task = (
-				<Note output={output}>
-					<Confirm message="say yes" input={input} output={output} />
-					<Confirm message="say yes again" input={input} output={output} />
-				</Note>
-			);
-			input.emit('keypress', '', { name: 'return' });
-			input.emit('keypress', '', { name: 'return' });
-			await task;
-
-			expect(output.buffer).toMatchSnapshot();
-		});
-	});
-
-	describe('Text', () => {
-		test('renders text input', async () => {
-			const task = <Text message="foo" output={output} input={input} />;
-
-			input.emit('keypress', '', { name: 'return' });
-
-			const result = await task;
-
-			expect(result).to.equal('');
-			expect(output.buffer).toMatchSnapshot();
-		});
-
-		test('can set placeholder', async () => {
-			const task = <Text message="foo" placeholder="bar" output={output} input={input} />;
-
-			input.emit('keypress', '', { name: 'return' });
-
-			const result = await task;
-
-			expect(result).to.equal('');
-			expect(output.buffer).toMatchSnapshot();
-		});
-
-		test('can set default value', async () => {
-			const task = <Text message="foo" defaultValue="bar" output={output} input={input} />;
-
-			input.emit('keypress', '', { name: 'return' });
-
-			const result = await task;
-
-			expect(result).to.equal('bar');
-			expect(output.buffer).toMatchSnapshot();
-		});
-
-		test('can set initial value', async () => {
-			const task = <Text message="foo" initialValue="bar" output={output} input={input} />;
-
-			input.emit('keypress', '', { name: 'return' });
-
-			const result = await task;
-
-			expect(result).to.equal('bar');
-			expect(output.buffer).toMatchSnapshot();
-		});
-	});
-
-	describe('Password', () => {
-		test('renders password input', async () => {
-			const task = <Password message="foo" output={output} input={input} />;
-
-			input.emit('keypress', '', { name: 'return' });
-
-			const result = await task;
-
-			expect(result).to.equal(undefined);
-			expect(output.buffer).toMatchSnapshot();
-		});
-
-		test('renders user input', async () => {
-			const task = <Password message="foo" output={output} input={input} />;
-
-			input.emit('keypress', 'a', { name: 'a' });
-			input.emit('keypress', 'b', { name: 'b' });
-			input.emit('keypress', '', { name: 'return' });
-
-			const result = await task;
-
-			expect(result).to.equal('ab');
-			expect(output.buffer).toMatchSnapshot();
-		});
-
-		test('can set custom mask', async () => {
-			const task = <Password message="foo" mask="!" output={output} input={input} />;
-
-			input.emit('keypress', 'a', { name: 'a' });
-			input.emit('keypress', 'b', { name: 'b' });
-			input.emit('keypress', '', { name: 'return' });
-
-			const result = await task;
-
-			expect(result).to.equal('ab');
-			expect(output.buffer).toMatchSnapshot();
-		});
-	});
-
-	describe('Select', () => {
-		test('renders options', async () => {
-			const task = (
-				<Select message="pick one" input={input} output={output}>
-					<Option value={303}>Option One</Option>
-					<Option value={808}>Option Two</Option>
-				</Select>
-			);
-
-			input.emit('keypress', '', { name: 'return' });
-
-			const result = await task;
-
-			expect(result).to.equal(303);
-			expect(output.buffer).toMatchSnapshot();
-		});
-	});
 });