> ## Documentation Index
> Fetch the complete documentation index at: https://docs.subframe.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Inspector

> Configure element properties in the right sidebar.

The Inspector panel shows all editable properties for the selected element. Select any element on the canvas to see its properties in the right sidebar.

<Frame>
  <img src="https://mintcdn.com/subframe-59800133/E2DcgNWNaQUj3Q4q/images/design-mode/inspector.png?fit=max&auto=format&n=E2DcgNWNaQUj3Q4q&q=85&s=0bdc2cdb413fcbda85bc7004c468bbad" alt="Inspector panel showing the element properties" width="1920" height="1440" data-path="images/design-mode/inspector.png" />
</Frame>

## Overrides properties

Overrides let you customize properties for specific contexts without changing the base element. There are two types of overrides:

* **[Responsive overrides](/learn/design-mode/responsive-design)** — mobile overrides for properties that need different values on small screens
* **[Variant overrides](/learn/components/variants)** — different values for component instances

<Frame>
  <img src="https://mintcdn.com/subframe-59800133/E2DcgNWNaQUj3Q4q/images/design-mode/overrides.png?fit=max&auto=format&n=E2DcgNWNaQUj3Q4q&q=85&s=f6d0125ae0975a4b703a125c6c8af011" alt="Inspector panel showing the element properties" width="375" height="346" data-path="images/design-mode/overrides.png" />
</Frame>

When a property has an override, a pink dot appears next to it. Click the pink dot to remove the override and revert to the default value.

## Prebuilt interactive components

The inspector lets you set the default state for some prebuilt components, so you can preview how they look in different conditions:

* **Checkbox**, **Switch**, **Radio Group item**, **Toggle Group item** — toggle the **Checked** prop
* **Text Field**, **Text Area** — type into the **Value** prop

These controls only affect how the instance renders in design mode and preview. Runtime state in generated code is controlled by your application — see [headless components](/concepts/code-generation#headless-components).

## Keyboard shortcuts

Most properties in the inspector have a keyboard shortcut. Hover over any edit action to see its shortcut.

<Frame>
  <img src="https://mintcdn.com/subframe-59800133/E2DcgNWNaQUj3Q4q/images/design-mode/inspector-shortcuts.png?fit=max&auto=format&n=E2DcgNWNaQUj3Q4q&q=85&s=9bffd24022f2da7007f605c2d1a68304" alt="Inspector panel showing the element properties" width="376" height="104" data-path="images/design-mode/inspector-shortcuts.png" />
</Frame>

For the full list, see [Keyboard shortcuts](/learn/design-mode/keyboard-shortcuts).