How to use Buttons and Form Controls

How to use Buttons and Form Controls

Use buttons and form controls to represent actions, collect user input, and create realistic interface designs.

Before you start

  1. Make sure you have permission to edit the board and are in design editing mode.
  2. You can access buttons and form controls from the Elements tab in the Wireframe Library.

Available buttons and form controls

Visily provides a range of buttons and form controls for representing actions, collecting input, and showing different selection states in your interface.
  1. Buttons. Use buttons to represent actions that users can take in an interface.
    1. Button: Displays an action using a text label and an optional icon.
    2. Icon Button: Displays an action using an icon without a text label.
    3. Button Group: Combines multiple related buttons into one control.
  2. Input fields. Use input fields to collect text, search terms, selections, and longer responses.
    1. Textbox: Collects a single line of text.
    2. Search Box: Lets users enter a search term.
    3. Dropdown Button: Opens a list of available options.
    4. Textarea: Collects longer, multi-line text.
  3. Selection controls. Use selection controls to let users choose options or change settings.
    1. Checkbox: Lets users select one or more independent options.
    2. Radio Button: Lets users select one option from a group.
    3. Switch: Turns an option or setting on or off.
    4. Slider: Lets users select a value by moving a control along a track.

Add a button or form control

  1. Open the board where you want to add the element.
  2. Open the Wireframe Library.
  3. Select the button or form control you want to use from the Smart Components section.
  4. Click the canvas to add it.
  5. Move, resize, or customize the element as needed.

Info
You can also press B to quickly add a Button element.

Manage a Button element

Select a Button, Icon Button, or Button Group to open its toolbar. Depending on the selected element, you can:
  1. Style: Choose a preset style to quickly update the button’s appearance.
  2. State: Change the button state, such as default, hover, pressed, or disabled, to represent different interactions.
  3. Size: Select a preset size or manually adjust the text size, width, height, and padding.
  4. Add icon: Add an icon before or after the button label. For an Icon Button, choose the icon displayed inside the button.
  5. Edit style: Customize the button color, layer opacity, blur, corner radius, and shadow.
  6. Text style and alignment: Format the button label and control how the text and icon are aligned within the button.
  7. Divider: Customize the dividers between buttons in a Button Group.
  8. Equalize button width: Make all buttons in a Button Group the same width for a consistent layout.
  9. Save as template: Save the button and its settings as a reusable template.
  10. Export: Export the selected button elements to image/PDF or to Figma.
  11. More actions: Access additional options such as align, arrange layers, copy, paste, duplicate, and delete.

Manage an input field

Select an input field to open its toolbar. Depending on the selected element, you can:
  1. Style: Choose a preset style to quickly update the field’s appearance.
  2. State: Change the field state, such as default, focused, filled, error, or disabled, to represent different interactions.
  3. Size: Select a preset size or adjust the field dimensions and spacing.
  4. Add icon: Add an icon to the input field to provide context or represent an action.
  5. Edit style: Customize the field color, layer opacity, blur, border style, corner radius, and shadow.
  6. Add label: Add a label to describe the information users should enter or select.
  7. Placeholder: Show or hide the placeholder text displayed inside the field.
  8. Text style and alignment: Format the text and control its alignment within the field.
  9. Save as template: Save the input field and its settings as a reusable template.
  10. Export: Export the selected elements to image/PDF or to Figma.
  11. More actions: Access additional options such as align, arrange layers, copy, paste, duplicate, and delete.

Manage a selection control

Select a Checkbox, Radio Button, Switch, or Slider to open its toolbar. Depending on the selected element, you can:
  1. Style: Choose a preset style to quickly update the control’s appearance.
  2. Direction: Arrange the control and its label horizontally or vertically.
  3. State: Change the control state, such as selected, unselected, on, off, or disabled.
  4. Size: Select a preset size or adjust the control dimensions.
  5. Edit style: Customize the color, layer opacity, and shadow.
  6. Add label: Add a label to describe the option or setting.
  7. Text: Add, remove, or edit the text displayed with the control.
  8. Text style: Format the label text, including its font, size, and emphasis.
  9. Text alignment: Control how the text is aligned with the selection control.
  10. Handle border: Customize the border around the control handle.
  11. Track corner radius: Adjust the corner radius of the control track.
  12. Tick marks: Show, hide, or customize tick marks where supported.
  13. Save as template: Save the selection control and its settings as a reusable template.
  14. Export: Export the selected elements to image/PDF or to Figma.
  15. More actions: Access additional options such as align, arrange layers, copy, paste, duplicate, and delete.


Idea
If you want to edit or reuse each part of the smart components separately, select Break into basic elements.

Note

  1. Buttons and form controls help make your design look realistic, but they do not automatically perform actions. To make an element interactive, switch to Prototype mode and add an interaction, such as navigating to another screen or opening an overlay.
  2. For a Slider, drag the handle along the track to adjust the displayed value or position.

  3. To add another option to a Checkbox or Radio Button group, select the element and click the + icon that appears next to it.

Need more help?
If this does not solve your issue, contact support and include a screenshot if possible.

    • Related Articles

    • How to add elements to the canvas

      Add elements to the canvas to create and customize your designs. You can add basic elements from the bottom toolbar or choose ready-made elements from the Wireframe Library and Diagram Library. Before you start Make sure you have permission to edit ...

    • How to use Paste to replace

      Use Paste to replace when you want to replace an existing design element with another copied element while keeping it in the same position on the canvas. This is useful when you want to quickly swap content, update a design variation, or replace a ...

    • How to use Sections, Screens, Containers, and Shapes

      Use sections, screens, containers, and shapes to organize your layouts and create the visual structure of your designs. Before you start Make sure you have permission to edit the board and are in design editing mode. You can access these elements ...

    • How to use anchors

      Use anchors to control how an element behaves when its parent container is resized. Anchors help keep elements aligned, positioned, or resized consistently inside screens, containers, and groups. Before you start Make sure you have permission to edit ...

    • Use Case Diagrams in Visily

      Use Case Diagrams show how users interact with a system and its functions. They are useful for capturing requirements, defining system scope, and illustrating user interactions. Before you start Make sure you have permission to edit the board and are ...