Form control states.

Example#

html
<input disabled class="disabled:opacity-50 disabled:cursor-not-allowed" />
<input type="checkbox" class="checked:bg-blue-500" />

Stacking#

Prefix order is screens → variants → utility. These variants combine with every screen (xxs: xs: sm: md:…) and with each other.

Best practices#

  • Style disabled rather than hide — users learn what exists

variants/index|Variants hub · responsive/index|Responsive · utilities/index|Utilities