Customizable Components

This page provides an overview of each component available in Customizable Components, detailing default properties, interactions, and unique features.

Conventions

Field state

Components that accept user input (e.g., Text Field, Checkbox) have a state that stores the value of the field. This state is exposed to the page, usually in the format of Component Name -> Value, and can be used in a submit function or to change the UI based on the user’s input. Forms are yet to be implemented in Plasmic, so you will need to handle the form submission logic yourself.

Slots vs props

For the content in all cases where possible we use Slots instead of props to allow for maximum flexibility and customization. Slots are used to insert content into a component, while props are used to configure the component’s behavior.

Prop naming

All of the prop names in this document are specified in a way they show up in the code. We use camelCase for prop names, for example onClick would be available as On Click in the Plasmic studio.

Button

The Button component provides customizable interaction and state management with different styles, sizes, and colors. It is designed for primary user actions across various UI contexts. If you want your button to act as a link (i.e., navigate to a different page), wrap the button using the Link component from the Plasmic library. As a shortcut, in the left sidebar you are able to right-click the Button component and “Convert it to a link”

Solid

Soft

Outline

Interactions: onClick
Variants:
- Colors: Default (Brand), Neutral, Muted, Success, Warning, Error/Destructive
- Sizes: Default (medium), Extra small, Small, Large, Extra large
- Icons: Start, End
- Rounded: Half (default), Full
- Flat Corners: Top, Bottom, Left, Right
- Type: Solid (default), Soft, Bordered

Button props

Prop	Description
`ariaLabel`	Aria label for the button.
`submitsForm`	Determines whether the button submits a form.
`resetsForm`	Determines whether the button resets a form.
`disabled`	Disables the button.

Button structure

Aria Button: The root level Aria Button element.
- Label slot: The button label.
- Interaction effect: The layer to implement hover/click styles.
- Icon start slot: The button icon located before the label.
- Icon end slot: The button icon located after the label.

Text Field

The Text Field component combines input functionality with label, description, and error slots for additional context.

Single Line

Label

(optional)

Multi Line

Label

(optional)

Input with icons

Label

(optional)

Label

(optional)

Label

(optional)

Interactions: onClick, onBlur, onFocus, onChange
Variants:
- Icons: Start, End
- Mutliline/Singleline

Text Field props

Prop	Description
`placeholder`	Placeholder text for the input field.
`showLabel`	Determines whether the label is displayed.
`showDescription`	Determines whether the description is displayed.
`ariaLabel`	Aria label for the input field.
`defaultValue`	Default value for the input field.
`type`	Input type (text, email, password, etc.).
`autoFocus`	Determines whether the input field is focused on render.
`disabled`	Disables the input field.
`readOnly`	Makes the input field read-only.
`inputMode`	Input mode for the input field. (email, numeric, etc.)
`autoComplete`	Autocomplete behavior for the input field. Read more here

Text Field structure

Aria Text Field: The root level Aria Text Field element.
- Label slot: The text field label, located above the input by default.
- Text Input: The input field itself. See more at Text Input.
  - Icon start slot: The icon located in the left side of the input.
  - Icon end slot: The icon located in the right side of the input.
- Description slot: Additional information about the text field, rendered below the input by default.

Text Input

The Text Input component is base input field for straightforward text entry. It is used by Text Field component when Multiline variant is turned off. Has all the props and interactions of the Text Field component.

Interactions: onClick, onBlur, onFocus, onChange

TextArea Input

The TextArea Input component allows for multi-line text input, suitable for comments, descriptions, or larger text content. It is used by Text Field component when Multiline variant is enabled. Has all the props and interactions of the Text Field component.

Interactions: onClick, onBlur, onFocus, onChange
Props: Extended support for resizing and multi-line display

Radio & Radio Group

The Radio and Radio Group components allow users to select one option from a set.

Label

(optional)

Option 1

Option 2

Option 3

Interactions: onChange

Radio Group props

Prop	Description
`defaultValue`	Default value for the radio group.
`showDescription`	Determines whether the description is displayed.
`ariaLabel`	Aria label for the radio group.
`disabled`	Disables the radio group.

Radio props

Prop	Description
`value`	Value of the radio button.

Radio Group structure

Aria Radio Group: The root level Aria Radio Group element.
- Label slot: The Radio Group label.
- Options slot: Target slot for radio buttons within the group.
  - Radio: The radio button itself.
    - Label slot: The radio button label.
- Description slot: Additional information about the Radio Group.

Checkbox & Checkbox Group

The Checkbox and Checkbox Group components enable users to make multiple selections from a list of options.

Label

(optional)

Option 1

Option 2

Option 3

Interactions: onChange

Checkbox Group props

Prop	Description
`defaultValues`	Default values for the checkbox group.
`disabled`	Disables the radio group.
`showDescription`	Determines whether the description is displayed.
`ariaLabel`	Aria label for the radio group.

Checkbox props

Prop	Description
`value`	Value of the radio button.
`defaultSelected`	Default selected state of the checkbox.

Checkbox Group Structure

Aria Checkbox Group: The root level Aria Checkbox Group element.
- Label slot: The Checkbox Group label.
- Options slot: Target slot for checkboxes within the group.
  - Checkbox: The checkbox option itself.
    - Label slot: The checkbox label.
- Description slot: Additional information about the Checkbox Group.

Switch

The Switch component is a toggle used for settings or binary states.

Label

Interactions: onChange

Switch props

Prop	Description
`showLabel`	Determines whether the label is displayed.
`autoFocus`	Determines whether the switch is focused on render.
`isSelected`	Determines whether the switch is selected by default.
`disabled`	Disables the switch.
`readOnly`	Makes the switch read-only.
`ariaLabel`	Aria label for the switch.

Switch structure

Aria Switch: The root level Aria Switch element.
- Switch container: The background behind the switch.
  - Switch handle: The switch handle that moves between on and off states.
- Label slot: The switch label.

Slider & Range Slider

The Slider and Range Slider components allow users to select a value (or range of values) by sliding a handle along a track.

Slider

Label

Range Slider

Label

0,100

Interactions: onChange

Slider & Range Slider props

Prop	Description
`minValue`	Minimum value for the slider.
`maxValue`	Maximum value for the slider.
`step`	Incremental step for the slider.
`initialValue`	Default value for the slider.
`showLabel`	Determines whether the label is displayed.
`showOutputText`	Determines whether the value is displayed on top of a slider.
`outputText`	Custom text to display on top of the slider. You can use dynamic values to map the current value to the options.
`disabled`	Disables the slider.
`ariaLabel`	Aria label for the slider.
`filled`	Determines whether the selected part of the slider track should be filled with color.

Slider structure

Aria Slider: The root level Aria Slider element.
- Aria Label: The slider label container.
  - Label slot: The slider label content.
- Aria Slider output: The output text container.
  - Output text slot: The text displaying the current value of the slider.
- Aria Slider Track: The track along which the slider handle moves.
  - Thumbs slot: The slot to modify the default thumb.
    - Slider thumb: The handle that moves along the track
- Progress bar slot: The slot to modify the default progress bar.

Select

The Select component provides a dropdown list of options, useful for choosing from a predefined set.

Label

(optional)

Interactions: onChange
Variants:
- Type: Default (Bordered), Soft, Plain

Select props

Prop	Description
`placeholder`	Placeholder text for the input field.
`showLabel`	Determines whether the label is displayed.
`initialValue`	The default key for the initially selected option.
`autoFocus`	Determines whether the input is focused automatically on render.
`disabled`	Disables the select input.
`ariaLabel`	The aria-label for accessibility, used for screen readers.

Select structure

Aria Select: The root level Aria Select element.
- Label slot: The label for the select.
- Button: The button to trigger the dropdown.
  - Slot: "label": The label within the button that displays the selected value.
    - Aria Selected value: Displays the selected value.
  - Slot: "start": Optional icon or element at the start (e.g., circle, hidden in this instance).
  - Slot: "end": Optional icon or element at the end (e.g., chevron-down to indicate dropdown).
- Menu popover: The container that holds the dropdown menu.
  - Slot: "menu items": The container for the list of items in the dropdown.
    - Slot target: "items": The list of selectable items.
      - Listbox item: A single selectable option in the dropdown.
    - Aria Section: A section within the dropdown for organizing options. (optional)
      - Slot: "header": The header for the section (e.g., “Section Header”).
      - Slot: "items": The list of items within this section.
        
        Listbox item: Each item within this section.

Combobox

Combobox is an enhanced dropdown component that supports both selection and actionable items within the list.

Label

(optional)

Interactions: onChange
Variants: Similar to Select
Structure: Similar to Select

Combobox props

Prop	Description
`placeholder`	Placeholder text for the input field.
`showLabel`	Determines whether the label is displayed.
`initialValue`	The default key for the initially selected option.
`autoFocus`	Determines whether the input is focused automatically on render.
`disabled`	Disables the combobox.
`ariaLabel`	The aria-label for accessibility, used for screen readers.
`inputDisplayValue`	The input value displayed in the combobox.
`readOnly`	Makes the input field read-only, preventing user modification.

The Modal component is used to display content in a focused overlay, prompting user action or displaying information. Drawer is very simillary to Modal, but it slides in from the bottom of the screen. By default both Modal and Drawer components are exposing the isOpen state to the page, so you can control the visibility of the dialog from the page. If you want an externally controlled modal - just use the No Trigger variant, and use the isOpen state.

Interactions: onOpenChange
Variants:
- “No Trigger” - externally controlled dialog.

Prop	Description
`isOpen`	Controls whether the modal is open or closed
`closeOnBackdropClick`	Determines if clicking on the backdrop will close the modal
`showHeader`	Toggles whether the modal heading is displayed
`showFooter`	Toggles whether the modal footer is displayed
`isKeyboardDismissDisabled`	Controls whether the modal can be dismissed using the keyboard (e.g., pressing “Esc”)

Aria Dialog trigger: The root level Aria Dialog Trigger element.
- Trigger slot: The trigger for opening the modal dialog. (e.g. button)
  - Button: The default trigger button.
- Aria Modal: The modal container itself.
  - Aria Heading: The heading element inside the modal.
    - Heading slot: The heading content.
  - Content slot: The content area within the modal body.
  - Footer slot: The footer area of the modal.
    - Button: Cancel action button
    - Button: Another action button (e.g., Confirm or secondary action).

The Popover component is used to display additional content when hovering, focusing, or clicking on an element.

Interactions: onOpenChange

Prop	Description
`offset`	The offset value for the popover position.
`shouldFlip`	Determines if the popover should flip when it reaches the viewport edge.
`placement`	The position of the popover relative to the trigger element.
`showArrow`	Determines if the arrow is displayed on the popover.

Aria Popover:
- Triangle: The arrow or triangle pointing to the trigger element.
- Content slot: The content displayed within the popover.

The Tooltip component is used to display additional information when hovering over an element. The difference with a Popover element is that the Tooltip is not actionable, meaning it can’t contain any links/buttons.

Hover me!

Prop	Description
`delay`	The delay value for the tooltip appearance.
`closeDelay`	The delay value for the tooltip disappearance.
`placement`	The position of the tooltip relative to the trigger element.
`isDisabled`	Disables the tooltip.
`showArrow`	Determines if the arrow is displayed on the tooltip.

Aria Tooltip:
- Trigger slot: The element that triggers the tooltip.
- Content slot: The content displayed within the tooltip.
- Triangle: The arrow or triangle pointing to the trigger element.

Was this page helpful?

Have feedback on this page? Let us know on our forum.

Customizable Components

Conventions

Field state

Slots vs props

Prop naming

Button

Button props

Button structure

Text Field

Single Line

Multi Line

Input with icons

Text Field props

Text Field structure

Text Input

TextArea Input

Radio & Radio Group

Radio Group props

Radio props

Radio Group structure

Checkbox & Checkbox Group

Checkbox Group props

Checkbox props

Checkbox Group Structure

Switch

Switch props

Switch structure

Slider & Range Slider

Slider

Range Slider

Slider & Range Slider props

Slider structure

Select

Select props

Select structure

Combobox

Combobox props

Modal and Drawer

Modal props

Modal structure

Popover

Popover props

Popover structure

Tooltip

Tooltip props

Tooltip structure