Selects

Selects 10 · Error state

A select marked invalid with a thick black border and an error line underneath.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='bg-white p-10'><label class='block max-w-xs text-sm font-medium text-black'>Role<div class='relative mt-1.5'><select class='w-full appearance-none rounded-lg border-2 border-black px-3 py-2.5 pr-9 text-sm text-neutral-500 outline-none'><option>Choose a role</option><option>Designer</option><option>Developer</option></select><span class='pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400'>⌄</span></div><span class='mt-1.5 flex items-center gap-1.5 text-xs font-medium text-black'><span class='grid h-4 w-4 place-items-center rounded-full bg-black text-[10px] text-white'>!</span>Please choose a role to continue.</span></label></div>

Selects 09 · Multi-select chips

A field showing selected items as removable black chips, with a text cursor and a floating suggestion.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='min-h-[300px] bg-white p-10'><div class='relative max-w-md'><p class='text-sm font-medium text-black'>Tags</p><div class='mt-1.5 flex flex-wrap items-center gap-2 rounded-lg border border-black p-2'><span class='inline-flex items-center gap-1 rounded-md bg-black px-2 py-1 text-xs font-medium text-white'>hero <span class='text-neutral-400'>×</span></span><span class='inline-flex items-center gap-1 rounded-md bg-black px-2 py-1 text-xs font-medium text-white'>dark <span class='text-neutral-400'>×</span></span><input type='text' placeholder='Add a tag' class='min-w-[80px] flex-1 px-1 text-sm outline-none'></div><ul class='absolute left-0 right-0 mt-1 overflow-hidden rounded-xl border border-neutral-200 bg-white py-1 text-sm shadow-lg'><li class='px-3 py-2 text-neutral-700 hover:bg-neutral-50'>navbar</li><li class='px-3 py-2 text-neutral-700 hover:bg-neutral-50'>pricing</li></ul></div></div>

Selects 08 · Radio cards

A choose-one control built from three selectable cards; the middle one is selected with a thick border.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='bg-white p-10'><fieldset class='max-w-2xl'><legend class='text-sm font-medium text-black'>Billing period</legend><div class='mt-3 grid gap-3 sm:grid-cols-3'><label class='cursor-pointer rounded-xl border border-neutral-300 p-4 text-sm'><input type='radio' name='b' class='sr-only'><span class='block font-semibold text-black'>Monthly</span><span class='text-neutral-500'>$12 / month</span></label><label class='cursor-pointer rounded-xl border-2 border-black p-4 text-sm'><input type='radio' name='b' checked class='sr-only'><span class='block font-semibold text-black'>Yearly</span><span class='text-neutral-500'>$9 / month</span></label><label class='cursor-pointer rounded-xl border border-neutral-300 p-4 text-sm'><input type='radio' name='b' class='sr-only'><span class='block font-semibold text-black'>Lifetime</span><span class='text-neutral-500'>$199 once</span></label></div></fieldset></div>

Selects 07 · Prefix and field

A phone-style field: a small country-code select joined to a number input.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='bg-white p-10'><label class='block max-w-sm text-sm font-medium text-black'>Phone<div class='mt-1.5 flex rounded-lg border border-neutral-300 focus-within:border-black'><select class='rounded-l-lg border-r border-neutral-200 bg-neutral-50 px-3 text-sm text-neutral-700 outline-none'><option>+91</option><option>+49</option><option>+1</option></select><input type='tel' placeholder='98765 43210' class='min-w-0 flex-1 rounded-r-lg px-3 py-2.5 text-sm outline-none'></div></label></div>

Selects 06 · Grouped options

A native select with option groups for sections such as Marketing and Application.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='bg-white p-10'><label class='block max-w-xs text-sm font-medium text-black'>Category<div class='relative mt-1.5'><select class='w-full appearance-none rounded-lg border border-neutral-300 px-3 py-2.5 pr-9 text-sm outline-none focus:border-black'><optgroup label='Marketing'><option>Hero</option><option>Pricing</option><option>Features</option></optgroup><optgroup label='Application'><option>Tables</option><option>Charts</option></optgroup></select><span class='pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400'>⌄</span></div></label></div>

Selects 05 · With avatars

A custom select list where every option has a round initials avatar and a name. Sample people.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='min-h-[340px] bg-white p-10'><div class='relative w-72'><p class='text-sm font-medium text-black'>Owner</p><button type='button' class='mt-1.5 flex w-full items-center gap-3 rounded-lg border border-black px-3 py-2 text-left text-sm text-black'><span class='grid h-7 w-7 place-items-center rounded-full bg-black text-[10px] font-semibold text-white'>AM</span>Alex Morgan<span class='ml-auto text-neutral-400'>⌄</span></button><ul class='absolute left-0 right-0 mt-1 overflow-hidden rounded-xl border border-neutral-200 bg-white py-1 shadow-lg'><li class='flex items-center gap-3 bg-neutral-50 px-3 py-2 text-sm font-medium text-black'><span class='grid h-7 w-7 place-items-center rounded-full bg-black text-[10px] font-semibold text-white'>AM</span>Alex Morgan</li><li class='flex items-center gap-3 px-3 py-2 text-sm text-neutral-700'><span class='grid h-7 w-7 place-items-center rounded-full bg-neutral-600 text-[10px] font-semibold text-white'>SR</span>Sam Rivera</li><li class='flex items-center gap-3 px-3 py-2 text-sm text-neutral-700'><span class='grid h-7 w-7 place-items-center rounded-full bg-neutral-400 text-[10px] font-semibold text-white'>JL</span>Jordan Lee</li></ul></div></div>

Selects 04 · Dark select

A select on a black background with a dark field and a white label.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='bg-black p-10'><label class='block max-w-xs text-sm font-medium text-white'>Theme<div class='relative mt-1.5'><select class='w-full appearance-none rounded-lg border border-neutral-700 bg-neutral-900 px-3 py-2.5 pr-9 text-sm text-white outline-none focus:border-white'><option>Black and white</option><option>System</option><option>Light</option></select><span class='pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-neutral-500'>⌄</span></div></label></div>

Selects 03 · With helper text

A select with a label, a helper line underneath and a small required marker.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='bg-white p-10'><label class='block max-w-sm text-sm font-medium text-black'>Plan <span class='text-neutral-400'>(required)</span><div class='relative mt-1.5'><select class='w-full appearance-none rounded-lg border border-neutral-300 px-3 py-2.5 pr-9 text-sm outline-none focus:border-black'><option>Pro, $12 per month</option><option>Team, $29 per seat</option></select><span class='pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400'>⌄</span></div><span class='mt-1.5 block text-xs font-normal text-neutral-500'>You can change plans at any time.</span></label></div>

Selects 02 · Custom select open

A custom select drawn open: a button showing the choice and a floating list of options with the selected one marked.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='min-h-[320px] bg-white p-10'><div class='relative w-64'><p class='text-sm font-medium text-black'>Assigned to</p><button type='button' class='mt-1.5 flex w-full items-center justify-between rounded-lg border border-black bg-white px-3 py-2.5 text-left text-sm text-black'>Sam Rivera<span class='text-neutral-400'>⌄</span></button><ul class='absolute left-0 right-0 mt-1 overflow-hidden rounded-xl border border-neutral-200 bg-white py-1 shadow-lg'><li class='px-3 py-2 text-sm text-neutral-700 hover:bg-neutral-50'>Alex Morgan</li><li class='flex items-center justify-between bg-neutral-50 px-3 py-2 text-sm font-medium text-black'>Sam Rivera<span>✓</span></li><li class='px-3 py-2 text-sm text-neutral-700 hover:bg-neutral-50'>Jordan Lee</li></ul></div></div>

Selects 01 · Native select with label

A labelled native select field with a rounded border and a chevron.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='bg-white p-10'><label class='block max-w-xs text-sm font-medium text-black'>Country<div class='relative mt-1.5'><select class='w-full appearance-none rounded-lg border border-neutral-300 bg-white px-3 py-2.5 pr-9 text-sm text-black outline-none focus:border-black'><option>India</option><option>Germany</option><option>United States</option><option>Brazil</option></select><span class='pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400'>⌄</span></div></label></div>