# UI states

The **UI state** of a component defines what it will look like in various scenarios, like a [Next](https://docs.formsort.com/building-flows/styling/buttons#next-button) button when it's hovered over. These states can be customized to create a feeling that the flow is responding to user interaction. 

Here is a helpful table that shows the different UI states that can be customized. 

| UI state     | Description                                                                                                                                                        |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **default**  | No user interaction has happened.                                                                                                                                  |
| **disabled** | The button is disabled (e.g., cannot continue, or a choice is disabled).                                                                                           |
| **checked**  | <p>User has selected this choice.<br><br><strong>Only available on</strong> <a href="#select-button">select</a> <strong>buttons and their variations.</strong></p> |
| **focused**  | The user has tabbed or otherwise focused the button.                                                                                                               |
| **hover**    | <p>The user's cursor is over the button.</p><p></p><p>This will not be seen by mobile responders, as there is not an equivalent to hover on mobile phones.</p>     |

{% hint style="info" %}
See our [CSS Reference](https://docs.formsort.com/css-and-advanced-styling/css-reference) section for an overview of the CSS properties that can be applied to various components.&#x20;
{% endhint %}

See the following sections for more insight into components and how they can be used.&#x20;