Documentation
  • ABLE - Design System
  • Structure
  • Themes
    • Styles
      • Ω Color Style
      • Ω Text Style
      • Ω Effect Style
      • Ω Size Dictionary
      • Ω Spacing Dictionary
      • Ω Motion Library
      • Ω Haptic Library
      • Ω Audio Library
      • Ω Time Dictionary
      • Ω Interaction Dictionary
    • Ω Icon Library
    • Ω Illustration Library
    • Ω Brand Library
  • Core
    • ε Elements
      • ε AdaptIcon
        • Θ AdaptIconBar
        • Ω AdaptIconShape
      • ε Avatar
        • Θ AvatarBar
        • Ω AvatarShape
      • Φ Badge
        • Θ Badge - Usecase
      • ε Button
        • Θ ButtonBar
      • Φ CheckboxCtrl
        • Ω CheckboxShape
      • ε Chip
        • ε ChipBar
        • Φ ChipModal
      • Φ Divider
      • ε FAB
        • Ω FABShape
      • ε Field
        • Θ FormFieldLabel
        • Θ FormFieldHelper
        • Θ FieldContainer
        • Θ FieldContent
        • Ω FieldShape
      • ε Graphic
        • ε Illustration (Canvas)
        • Θ GraphicBar
        • Θ Graphic - Status
        • ε Overlay
          • Φ OL - AdaptIcon
          • Φ OL - Avatar
          • Φ OL - Button
          • Φ OL - Icon
          • Φ OL - Sash
          • Φ OL - Stepper
          • Φ OL - Banner
          • Φ OL - Headline
      • Φ Icon
      • ε InputStepperCtrl
        • Φ InputStepperPieces
      • ε Label
      • ε ProgressCtrl
        • Φ ProgressBar
      • Φ RadioBtnCtrl
        • Ω RadioBtnShape
      • ε RatingCtrl
        • Φ RatePoint
        • Ω RatePointShape
      • ε SliderCtrl
        • Φ SliderBar
          • Ω SliderIndicator
          • Ω SliderKnob
          • Ω SliderTrack
          • Φ RulerTrack
            • Ω RulerTic
      • ε Snackbar
      • ε Paginator
        • Φ PagePoint
        • Ω PagePointShape
      • Φ SwitchCtrl
        • Ω SwitchShape
      • Φ Tab
        • Ω TabActive
      • ε ToggleCtrl
        • ε ToggleBar
        • Φ ToggleBtn
        • ε NavToggle
      • ε Tooltip
      • ε Caption
        • Θ Caption - Description
        • Θ Caption - Support
        • Θ Caption - Title
        • Θ CC - Leading
        • Θ CC - Primary
        • Θ CC - Trailing
    • Components
      • App Bar
        • Θ ABC - Leading
        • Θ ABC - Center
        • Θ ABC - Trailing
        • Θ ABC - Pieces
        • Θ AppBarExt
        • NavTab
      • Bullet
      • Button Panel
      • Content Bar
      • Form
        • Checkbox
        • ChipList
        • Input Stepper
        • Picker
          • PickView
        • Radio Button
        • Rate
        • SelectList
        • Slider
        • Switch
        • TextArea
        • Textfield
        • Toggle Button
        • UserList
        • FC - Leading
        • FC - Trailing
      • Headline
      • ListItem
        • Θ LIC - Leading
        • Θ LIC - Primary
        • Θ LIC - Trailing
      • Menu
        • Θ MC - Leading
        • Θ MC - Primary
        • Θ MC - Trailing
      • Modal
      • Paragraph
      • Section Header
      • Sheet
        • Sheet Drag
        • Sheet - Content
        • Sheet - Footer
      • Paginator Panel
      • TabBar
    • Ξ Modules
      • CardView
        • CardBar
        • CardItem
      • GridView
      • Hero
      • ListView
      • MasonryView
  • Actions
  • Contributing
    • Code of Conduct
Powered by GitBook
On this page
  • Properties
  • Interaction
  1. Core
  2. ε Elements

Φ SwitchCtrl

PreviousΩ PagePointShapeNextΩ SwitchShape

Last updated 9 months ago

Primitive: A singular control switch with its possible status (on/off) and states.

  • Parent: (Form Component), Multiple others

  • Child:

Properties

Status - The value given to the screen object, in this case a switch with possibilities of On or Off.

Style - Supplied by the child level (Base - Shape) this is the general appearance of the screen object. For now we only have the base style you'd normally see a switch, and a rectangular option which is our customized appearance for a switch. Note: Additional appearance can be added to the Base - Shape file to extend the styles at this level.

State - The different appearances of the screen object based on interaction and the status of the screen object. Possible states are Enabled, Disabled, Focus, Hover, Pressed.

Interaction

Hitarea - It's important to understand that the tappable/clickable area of the screen object being displayed may be small in appearance than the actual area you can interact with. This hitarea will normally be based off the parents container for this primitive.

Styleguide Link
Switch
SwitchShape