Toggle

The Toggle component provides a clickable element in the check box, button, or switch type, typically used to switch between two states. For details, see Toggle.

Creating a Toggle

A toggle is created using ToggleOptions. The syntax is as follows:

Toggle(options: { type: ToggleType, isOn?: boolean })

In this API, ToggleType indicates the toggle type, which can be Button, Checkbox, or Switch, and isOn specifies whether the toggle is turned on.

Since API version 11, the default style of the Checkbox component is changed from rounded square to circle.

The API can be called in either of the following ways:

• Create a toggle that does not contain child components.

  This can be achieved by calling the API with ToggleType set to Checkbox or Switch.

  Toggle({ type: ToggleType.Checkbox, isOn: false }).id('toggle1') // Replace the value of id with the actual ID.
  Toggle({ type: ToggleType.Checkbox, isOn: true }).id('toggle2') // Replace the value of id with the actual ID.
  

  CreateToggle.ets

  

  Toggle({ type: ToggleType.Switch, isOn: false }).id('toggle3') // Replace the value of id with the actual ID.
  Toggle({ type: ToggleType.Switch, isOn: true }).id('toggle4') // Replace the value of id with the actual ID.
  

  CreateToggle.ets

  

• Create a toggle that contains a child component.

  When ToggleType is set to Button, only one child component is allowed. If the child component has text set, the text content is displayed on the button.

  Toggle({ type: ToggleType.Button, isOn: false }) {
    Text('status button')
      .fontColor('#182431')
      .fontSize(12)
  }.width(100).id('toggle5') // Replace the value of id with the actual ID.
  
  Toggle({ type: ToggleType.Button, isOn: true }) {
    Text('status button')
      .fontColor('#182431')
      .fontSize(12)
  }.width(100).id('toggle6') // Replace the value of id with the actual ID.
  

  CreateToggle.ets

  

Setting Styles

• Use the selectedColor attribute to set the background color of the toggle for when it is turned on.

    Toggle({ type: ToggleType.Button, isOn: true }) {
      Text('status button')
        .fontColor('#182431')
        .fontSize(12)
    }.width(100)
    .selectedColor(Color.Pink)
  // ···
  
    Toggle({ type: ToggleType.Checkbox, isOn: true })
      .selectedColor(Color.Pink)
      // ···
    Toggle({ type: ToggleType.Switch, isOn: true })
      .selectedColor(Color.Pink)
      // ···
  

  ToggleCustomStyle.ets

  

• Use the switchPointColor attribute to set the color of the circular slider. This attribute is valid only when type of the toggle is set to ToggleType.Switch.

  Toggle({ type: ToggleType.Switch, isOn: false })
    .switchPointColor(Color.Pink)
    // ···
  Toggle({ type: ToggleType.Switch, isOn: true })
    .switchPointColor(Color.Pink)
    // ···
  

  ToggleCustomStyle.ets

  

Adding Events

The Toggle component supports the universal events. In addition, it can be bound to the onChange event so that it responds with custom behavior after being turned on or off.

Toggle({ type: ToggleType.Switch, isOn: false })
  .onChange((isOn: boolean) => {
    if(isOn) {
      // Operation
      // ···
    }
  })

Example Scenario

In this example, the Toggle component is used to enable or disable Bluetooth.

// xxx.ets
import { promptAction } from '@kit.ArkUI';

@Entry
@Component
export struct ToggleSample {
  @State message: string = 'off';
  pathStack: NavPathStack = new NavPathStack();

  build() {
    NavDestination() {
      Column({ space: 8 }) {
        Column({ space: 8 }) {
          Text('Bluetooth Mode: ' + this.message)
            .id('message')
          Row() {
            Text('Bluetooth')
            Blank()
            Toggle({ type: ToggleType.Switch })
              .id('toggle') // Replace the value of id with the actual ID.
              .onChange((isOn: boolean) => {
                if (isOn) {
                  this.message = 'on';
                  promptAction.openToast({ 'message': 'Bluetooth is on.' });
                } else {
                  this.message = 'off';
                  promptAction.openToast({ 'message': 'Bluetooth is off.' });
                }
              })
          }.width('100%')
        }
        .alignItems(HorizontalAlign.Start)
        .backgroundColor('#fff')
        .borderRadius(12)
        .padding(12)
        .width('100%')
      }
      .width('100%')
      .height('100%')
      .padding({ left: 12, right: 12 })
    }
    .backgroundColor('#f1f2f3')
    // Replace $r('app.string.ToggleCaseExample_title') with the actual resource file. In this example, the value in the resource file is "Bluetooth."
    .title($r('app.string.ToggleCaseExample_title'))
  }
}