# Disabled states

Visual cues that indicate an element is inactive or unavailable, preventing interaction until certain conditions are met. They help set clear user expectations and guide workflows.

## When to use

- **Unavailable actions** – If a feature is not yet accessible (e.g., “`Submit`” button before filling out a form).

- **Permissions or restrictions** – When a user lacks access to a specific function (e.g., “`Delete`” option for non-admin users).

- **Incomplete steps** – When an action depends on a previous step being completed (e.g., checkout button before selecting a payment method).

## Best practices

- **Clearly indicate the disabled state** – Use lower opacity and remove interactive behaviors like hover effects.

- **Provide explanations** – If possible, let users know why an element is disabled and how to enable it.

- **Avoid disabling key actions** – Instead of disabling, consider guiding users with tooltips or inline messages.

<buttondisabled>Submit</button>

<input type="text"disabled placeholder="Unavailable">

Disabled states should always feel intentional and not confusing, ensuring users understand what’s happening and how to proceed.