Input

<input id="email" type="email" placeholder="you@examlpe.com" class="b-1 bc-silver-4 tc-black px-3 py-2 rad-0 fs-md f:oc-silver-1 f:os-s f:ow-2" />

<div class="d-f fd-c g-2">
  <div class="p-r w-full">
    <input id="search" type="text" placeholder="Search..." class="b-1 bc-silver-4 tc-black pl-9 pr-3 py-2 rad-0 fs-md f:oc-silver-1 f:os-s f:ow-2 w-full" />
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="p-a l-3 t-0 bo-0 m-auto fs-lg tc-silver-12 h-4 w-4"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <path d="m21 21-4.34-4.34" />
      <circle cx="11" cy="11" r="8" />
    </svg>
  </div>
</div>

<div class="d-f fd-c g-2">
  <label for="email" class="tc-silver-12 fw-600">Email</label>
  <input id="email" type="email" placeholder="you@examlpe.com" class="b-1 bc-silver-4 tc-black px-3 py-2 rad-0 fs-md f:oc-silver-1 f:os-s f:ow-2" />
</div>

<div class="d-f fd-c g-2">
  <label class="fw-600 tc-slate-9">Email</label>
  <input disabled type="text" placeholder="A disabled input" class="b-1 bc-silver-4 tc-black px-3 py-2 rad-0 fs-md f:oc-silver-1 f:os-s f:ow-2" />
</div>

<div class="d-f fd-c g-1">
  <label for="error-input" class="fw-600 tc-slate-9">Phone number <span class="tc-slate-9 us-none">*</span></label>
  <input id="error-input" type="tel" placeholder="(123) 456-7890" class="bg-red-1/15 tc-red px-3 py-2 rad-0 fs-md bc-red-6 b-1 f:oc-red-2 f:os-s f:ow-2" />
  <span class="tc-red fs-sm">Invalid phone number.</span>
</div>