Meta tags:

Headings (most frequently used words):

textarea, examples, using, adding, label, description, components, installation, basic, example, styling, component, api, styled, forms, data, attributes, render, props, disabling, field,

Text of the page (most frequently used words):
the (59), #textarea (57), description (32), data (27), component (24), disabled (22), label (20), field (20), whether (14), render (13), you (13), not (13), boolean (13), and (12), prop (11), focus (11), example (10), using (9), attribute (9), hover (9), react (9), name (8), from (8), import (8), for (7), element (7), headlessui (7), examples (6), return (6), function (6), adding (5), props (5), attributes (5), should (5), false (5), focused (5), invalid (5), classname (5), state (5), which (5), currently (5), via (5), headless (5), tailwind (4), api (4), this (4), string (4), default (4), form (4), control (4), autofocus (4), can (4), information (4), about (4), exposes (4), tells (4), mouse (4), each (4), that (4), all (3), like (3), them (3), components (3), css (3), hovered (3), native (3), 100 (3), add (3), any (3), your (3), use (3), see (3), clsx (3), keyboard (3), different (3), styles (3), styled (2), disabling (2), styling (2), basic (2), installation (2), more (2), predesigned (2), way (2), open (2), makes (2), out (2), built (2), parent (2), when (2), true (2), associated (2), rendered (2), wrapper (2), around (2), also (2), disable (2), extra (2), event (2), here (2), opacity (2), its (2), automatically (2), associate (2), with (2), list (2), available (2), shadow (2), blue (2), border (2), fragment (2), being (2), conditionally (2), apply (2), states (2), are (2), popover (2), menu (2), pass (2), install (2), npm (2), 2026, labs, inc, rights, reserved, page, explore, great, support, our, work, source, projects, possible, improve, keep, well, maintained, interested, check, collection, beautifully, designed, expertly, crafted, plus, describes, clicking, won, passive, labels, div, groups, together, was, set, receive, first, thin, outside, directly, itself, gray, within, aria, describedby, wrap, generated, current, content, based, presence, these, easy, modifier, selector, easiest, style, but, because, completely, unstyled, box, until, provide, want, yourself, keeps, track, lot, closed, item, normally, textareas, get, started, code, preview, light, handles, tedious, accessibility, concerns, provides, opinionated, things, switch, select, radio, group, listbox, input, fieldset, combobox, checkbox, button, forms, transition, tabs, dialog, disclosure, dropdown, vue,

Text of the page (random words):
textarea headless ui v2 1 react vue components dropdown menu disclosure dialog popover tabs transition forms button checkbox combobox fieldset input listbox radio group select switch textarea textarea a light wrapper around the native textarea element that handles tedious accessibility concerns and provides more opinionated states for things like hover and focus preview code installation to get started install headless ui via npm npm install headlessui react basic example textareas are built using the textarea component import textarea from headlessui react function example return textarea name description textarea you can pass any props to a textarea that you d normally pass to the native textarea element styling headless ui keeps track of a lot of state about each component like whether or not a textarea is focused whether a popover is open or closed or which item in a menu is currently focused via the keyboard but because the components are headless and completely unstyled out of the box you can t see this information in your ui until you provide the styles you want for each state yourself using data attributes the easiest way to style the different states of a headless ui component is using the data attributes that each component exposes for example the textarea component exposes a data focus attribute which tells you if the textarea is currently focused via the mouse or keyboard and a data hover attribute which tells you if the textarea is currently being hovered by the mouse rendered textarea textarea name description data focus data hover textarea use the css attribute selector to conditionally apply styles based on the presence of these data attributes if you re using tailwind css the data attribute modifier makes this easy import textarea from headlessui react function example return textarea name description classname border data focus bg blue 100 data hover shadow textarea see the component api for a list of all the available data attributes using render props each component also exposes information about its current state via render props that you can use to conditionally apply different styles or render different content for example the textarea component exposes a focus state which tells you if the textarea is currently focused via the mouse or keyboard and a hover state which tells you if the textarea is currently being hovered by the mouse import textarea from headlessui react import clsx from clsx import fragment from react function example return textarea name description as fragment focus hover textarea classname clsx border focus bg blue 100 hover shadow textarea textarea see the component api for a list of all the available render props examples adding a label wrap a label and textarea with the field component to automatically associate them using a generated id import field label textarea from headlessui react function example return field label description label textarea name description textarea field adding a description use the description component within a field to automatically associate it with a textarea using the aria describedby attribute import description field label textarea from headlessui react function example return field label description label description add any extra information about your event here description textarea name description textarea field disabling a textarea add the disabled prop to the field component to disable a textarea and its associated label and description import description field label textarea from headlessui react function example return field disabled label classname data disabled opacity 50 name label description classname data disabled opacity 50 add any extra information about your event here description textarea name description classname data disabled bg gray 100 textarea field you can also disable a textarea outside of a field by adding the disabled prop directly to the textarea itself component api textarea a thin wrapper around the native textarea element prop default description as textarea string component the element or component the textarea should render as invalid false boolean whether or not the textarea is invalid disabled false boolean whether or not the textarea is disabled autofocus false boolean whether or not the textarea should receive focus when first rendered data attribute render prop description data invalid invalid boolean whether or not the textarea is invalid data disabled disabled boolean whether or not the textarea is disabled data focus focus boolean whether or not the textarea is focused data hover hover boolean whether or not the textarea is hovered data autofocus autofocus boolean whether or not the autofocus prop was set to true field groups a label description and form control together prop default description as div string component the element or component the field should render as disabled false boolean whether or not the field is disabled data attribute render prop description data disabled disabled boolean whether or not the field is disabled label the label component labels a form control prop default description as label string component the element or component the label should render as passive false boolean when true clicking the label won t focus the associated form control data attribute render prop description data disabled disabled boolean whether or not the parent field is disabled description the description component describes a form control prop default description as p string component the element or component the description should render as data attribute render prop description data disabled disabled boolean whether or not the parent field is disabled styled examples if you re interested in predesigned tailwind css textarea examples check out tailwind plus a collection of beautifully designed and expertly crafted components built by us it s a great way to support our work on open source projects like this and makes it possible for us to improve them and keep them well maintained explore more predesigned examples on this page installation basic example styling using data attributes using render props examples adding a label adding a description disabling a textarea component api textarea field label description styled examples 2026 tailwind labs inc all rights reserved