Style tekstfelt og tekstområder

Nettlesere gjengir tekstfelt og tekstområder med sine egne standardstiler – forskjellige i hvert operativsystem og hver nettleser. I Chrome har standardfeltet en blå ring ved fokus, mens det kan se helt annerledes ut i Firefox.

Tailwind tilbakestiller skjemaelementer med basisstilene sine i preflight, slik at du får et rent utgangspunkt. Deretter bruker du egne stiler for kantlinje, innvendig marg, bakgrunn og fokus eksplisitt, og skaper en konsistent opplevelse i alle nettlesere.

Et godt utformet tekstfelt kombinerer verktøyklasser for størrelse, kantlinje, bakgrunn og fokus. Grunnmønsteret for standardtilstanden er w-full px-3 py-2 text-sm bg-white border border-gray-300 rounded-lg.

Legg til placeholder:text-gray-400 for å tone ned plassholderteksten og text-gray-900 for å sikre at den faktiske inndatateksten er mørk og lett å lese. Verktøyklassen w-full sørger for at feltet fyller beholderen, slik det forventes for skjemafelt.

Fokustilstanden er den viktigste interaktive stilen for et inndatafelt. Brukere som navigerer med tastaturet, trenger en tydelig visuell indikator på hvilket felt som er aktivt. Bruk focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent for å erstatte nettleserens standardomriss med en Tailwind-ring.

focus:border-transparent fjerner den grå kantlinjen ved fokus, slik at den blå ringen ikke konkurrerer visuelt med den. Legg til transition-shadow duration-150 for at ringen skal vises jevnt.

Alle inndatafelt må ha en tilknyttet etikett av hensyn til tilgjengeligheten. Legg etiketten og inndatafeltet i en beholder med flex flex-col gap-1, slik at de stables ryddig. Etiketten bruker text-sm font-medium text-gray-700 og kobles til inndatafeltet med samsvarende for- og id-attributter.

Stol aldri bare på plassholdertekst som erstatning for en etikett – plassholdere forsvinner når brukeren begynner å skrive, og feltet mister da konteksten sin.

Mange inndatafelt har nytte av et prefiksikon som formidler hvilken type inndata som forventes – et forstørrelsesglass for søk, en konvolutt for e-post eller en lås for passord. Bruk relative på omslaget, absolute left-3 top-1/2 -translate-y-1/2 på ikonet og pl-10 på inndatafeltet for å forskyve teksten forbi ikonet.

Denne teknikken holder ikonet og inndatafeltet pent justert uten ekstra omslagselementer som påvirker oppsettet.

En suffiksknapp sitter festet til høyre kant av et inndatafelt – vanlig i passordfelt (vis/skjul-veksling) eller søkefelt (send-knapp). Bruk et flex-omslag med overflow-hidden rounded-lg border border-gray-300 flex, sett inndatafeltet til flex-1 border-0 focus:ring-0, og style knappen med en venstre kantlinje som skille.

border-0 på inndatafeltet fjerner kantlinjen, siden det ytre flex-omslaget leverer den felles kantlinjen.

Tekstområder bruker de samme verktøyklassene som tekstfelt. Angi en minimumshøyde med min-h-24 eller en fast høyde med h-32, og legg til resize-none eller resize-y for å styre om brukeren kan endre størrelsen på elementet.

Bruk resize-y for å tillate endring av høyden (den mest naturlige oppførselen for tekstområder), og hindre vannrett endring som kan ødelegge oppsettet. leading-relaxed gjør det lettere å lese når brukere skriver innhold over flere linjer.

Deaktiverte inndatafelt bør skille seg visuelt fra aktive felt. Bruk disabled:bg-gray-50 disabled:text-gray-400 disabled:cursor-not-allowed for å gi dem et lysere, uttonet utseende. Legg også til disabled:border-gray-200 for å tone ned kantlinjen.

Ta alltid med HTML-attributtet disabled – Tailwinds disabled:-variant leser dette attributtet, slik at stilene bare brukes når attributtet er til stede.

Et readonly-felt viser en verdi som brukerne kan lese og kopiere, men ikke endre. I motsetning til deaktiverte felt kan skrivebeskyttede felt fortsatt få fokus og navigeres med tastaturet. Style dem med read-only:bg-gray-50 read-only:text-gray-600 for å antyde på en diskret måte at de ikke kan redigeres.

Skrivebeskyttede felt brukes for beregnede verdier, bekreftelsesfelt eller referansedata som brukerne må se, men ikke bør endre.

Skjemaer i ulike sammenhenger trenger inndatafelt i forskjellige størrelser. Definer en liten, middels og stor variant ved å endre innvendig marg og tekststørrelse. Et lite inndatafelt passer godt for innebygde filtre, mens et stort inndatafelt passer til fremtredende søkefelt.

• Liten: px-2.5 py-1.5 text-xs
• Middels: px-3 py-2 text-sm (standard)
• Stor: px-4 py-3 text-base

Tekstområder for brukergenerert innhold har ofte en tegntelling som vises under feltet. Bruk en flex-rad med flex items-center justify-between mt-1 for å plassere hjelpeteksten til venstre og telleren til høyre.

Style hjelpeteksten med text-xs text-gray-500 og telleren med tilsvarende liten, grå tekst. JavaScript oppdaterer telleren ved hver input-hendelse. Når grensen nærmer seg, bytter du tellerens farge til text-red-600 som en advarsel.

I denne leksjonen lærte du grunnleggende stilsetting av inndatafelt med border border-gray-300 rounded-lg px-3 py-2; fokusringer som erstatter nettleserens omriss ved hjelp av focus:outline-none focus:ring-2 focus:ring-blue-500; og spesielle inndatamønstre som ikonprefikser med absolutt posisjonering, suffiksknapper med flex-oppsett og varianter for deaktiverte og skrivebeskyttede felt. Neste gang skal vi style nedtrekkslister og avmerkingsbokser.