app-ui / forms / input-groups
Input With Inline Add On
10-input-with-inline-add-on.jsx
export default function Example() {
return (
<div>
<label htmlFor="company-website" className="block text-sm/6 font-medium text-gray-900 dark:text-white">
Company website
</label>
<div className="mt-2">
<div className="flex items-center rounded-md bg-white pl-3 outline-1 -outline-offset-1 outline-gray-300 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-indigo-600 dark:bg-white/5 dark:outline-white/10 dark:focus-within:outline-indigo-500">
<div className="shrink-0 text-base text-gray-500 select-none sm:text-sm/6 dark:text-gray-400">https://</div>
<input
id="company-website"
name="company-website"
type="text"
placeholder="www.example.com"
className="block min-w-0 grow py-1.5 pr-3 pl-1 text-base text-gray-900 placeholder:text-gray-400 focus:outline-none sm:text-sm/6 dark:text-white dark:placeholder:text-gray-500"
/>
</div>
</div>
</div>
)
}