# Toggle Group Button (fw-toggle-group-button)

fw-toggle-group-button displays a button on the user interface and enables performing specific actions based on the button type. This button can be used as a card or an icon button

# Demo


Show Code

# Usage

# Properties

Property Attribute Description Type Default
baseClassName base-class-name sets the default base class name and the rest of the class names for the other states are automatically appended to this string 'fw-card-radio'
description description Label displayed as description in the card. string ''
disabled disabled Disables the component on the interface. If the attribute’s value is undefined, the value is set to false. boolean false
header header Label displayed as header in the card. string ''
index index index attached inside the parent group component number -1
isCheckbox is-checkbox Enables the component to be used as a part of multi selection group boolean false
name name Name of the component, saved as part of the form data. string ''
selectable selectable Enables the component to be used as a toggle button or just to be used as a normal button boolean true
selected selected Sets the state to selected. If the attribute’s value is undefined, the value is set to false. boolean false
type type sets the type of the button "card" \| "custom" \| "icon" 'card'
value value Identifier corresponding to the component, that is saved when the form data is saved. string ''

# Events

Event Description Type
fwToggled Triggered when the card in focus is selected. CustomEvent<any>

# Methods

# setFocus() => Promise<void>

Public method exposed to set the focus for the button component - to be used for accessibility

# Returns

Type: Promise<void>

# CSS Custom Properties

Name Description
--fw-toggle-group-button-card-description-max-height maximum height for the description text.
--fw-toggle-group-button-card-description-max-lines maximum lines that can be displayed for description text.
--fw-toggle-group-button-card-height height of the content.
--fw-toggle-group-button-card-width width of the card.
--fw-toggle-group-button-icon-button-height defines the height of the icon toggle button - default is 36px
--fw-toggle-group-button-icon-button-width defines the width of the icon toggle button - default is 42px

# Dependencies

# Depends on

# Graph

graph TD;
  fw-toggle-group-button --> fw-icon
  fw-icon --> fw-toast-message
  fw-toast-message --> fw-spinner
  fw-toast-message --> fw-icon
  style fw-toggle-group-button fill:#f9f,stroke:#333,stroke-width:4px

Built with ❤ at Freshworks