> Working with components in Radzen Blazor Studio
# Components
Radzen Blazor Studio makes it easy to add and manage Blazor components and HTML elements through its visual designer.
## Toolbox
When you open a `.razor` file, Radzen Blazor Studio displays a **Toolbox** that lists all components available in your project.
The Toolbox includes several categories:
- **Built-in** - Standard Blazor components such as `InputText`, `EditForm`, and `NavLink`.
- **Third-party** - Components from external libraries used in your project.
- **Application** - Components defined within your own app (like pages with the `@@page` directive or shared components).
- **HTML** - Common HTML elements such as `div`, `p`, and `button`. To use other elements, you can edit the source code.
## Add a Component
To add a Blazor component or HTML element:
1. Find it in the Toolbox. You can type part of its name to locate it quickly.
2. Drag it from the Toolbox onto the **Design Canvas**.
3. Drop it where you want it - before, after, or inside another element.
## Select a Component
You can select components in a few different ways:
- Click the component directly on the **Design Canvas**.
- Click the component name in the **Outline** view in the sidebar.
- Use the toolbar arrows to move the selection to a parent or child component.
You can also select multiple components by holding **Ctrl** (or **Cmd** on macOS) and clicking several elements.
To select a range, click one component, then **Shift-click** another - everything in between will be selected.
## Move Components
1. Select one or more components.
2. Drag the **move handle** to a new position.
3. Release the mouse button to place them.
## Cut, Copy, and Paste
You can use keyboard shortcuts to cut, copy, or paste components:
- **Ctrl + X** (Cmd + X on macOS) - Cut
- **Ctrl + C** (Cmd + C) - Copy
- **Ctrl + V** (Cmd + V) - Paste
You can also use the **context menu** or the **“…”** button in the toolbar.
## Delete Components
To delete a component:
- Select it, then click **Delete** from the toolbar or context menu.
- You can also press **Backspace**.
## Set Properties
When you select a Blazor component, all of its parameters (the ones marked with `[Parameter]`) appear in the **Property Grid**.
You can use the Property Grid to set or change values.
You don’t need to add quotation marks (`" "`) around string values - Radzen Blazor Studio does that for you.
### Bind a Property to Data
You can bind a component property to a field or property in your page’s data by typing `@@`. Radzen Blazor Studio shows an autocomplete dropdown with available members as you type.
You can also click the **gear icon** next to a property.
This opens the **Expression Editor**, where you can choose an existing property or field from your page.
### Two-Way Data Binding
For properties that support two-way binding (such as `Value` and `ValueChanged`), Radzen Blazor Studio uses the `@@bind-` syntax automatically.
You can toggle between one-way and two-way binding using the **↔** button.
For example:
```razor
@@bind-Value="value"
```
can be switched to:
```razor
Value="value"
```
## Attributes
You can add custom attributes to HTML elements or Blazor components that support them.
Components that include a property decorated with `[Parameter(CaptureUnmatchedValues = true)]` can receive additional custom attributes.
- To add a custom attribute to a Blazor component, click the **+** next to **Custom attributes**, then enter the name and value.
- To add an attribute to an HTML element, click **Add Attribute**.
## CSS Style
Use the **Styles** tab in the Property Grid to change how a component or element looks.
When you edit a style property, Radzen Blazor Studio automatically generates a `style` attribute.
## Events
You can handle component events from the **Events** tab in the Property Grid.
1. Click the **+** next to an event name.
2. Enter a method name - a default name is suggested automatically.
3. Radzen Blazor Studio creates the event handler and opens it in **Methods** mode, where you can add your logic.
Handling events for HTML elements works the same way.
Click **Add event** and follow the same steps.
## Templates
Some Blazor components have template properties (like `RenderFragment` or `RenderFragment`).
To edit one, click the **pencil icon** next to the property.
Radzen Blazor Studio switches to **template edit mode**, allowing you to drag and drop components directly inside the template area.
If you open the **Expression Editor**, you can access template context properties using the `context` parameter.
Click **Done** when you finish editing.
## Text
The **Text** item lets you insert plain text into your page - either inside or outside HTML elements.
To edit text, double-click it in the designer to enter inline edit mode and type your content.
> **Note:**
> Adding a Text item before or after another Text item merges them into one.
## Expression
The **Expression** item allows you to display dynamic C# values (for example, `@@counter`) directly on the page.
