A switch allows users to toggle the state of a single setting.
import { DaffSwitchComponent } from '@daffodil/design/switch'
The switch component provides a way to toggle between two settings.
<daff-switch>Label</daff-switch>
@Component()
class DaffSwitchComponent extends DaffSizableDirective<DaffSwitchSize> implements DaffDisableable {
checked: ModelSignal<boolean> = model(false)
defaultSize: "sm"
labelPosition: InputSignal<DaffSwitchLabelPosition> = DaffSwitchLabelPositionEnum.LEFT
@Input() disabled: any
id: InputSignal<string> = 'daff-switch-' + switchIncrementalId++
@Input() size: DaffButtonSize
toggled: OutputEmitterRef<boolean> = output<boolean>()
}
InputSignal<DaffSwitchLabelPosition>| Default | DaffSwitchLabelPositionEnum.LEFT |
|---|---|
| Description | The position of the label relative to the switch. |
any| Default | – |
|---|---|
| Description | Whether the switch is disabled. |
InputSignal<string>| Default | 'daff-switch-' + switchIncrementalId++ |
|---|---|
| Description | The unique id of the switch. Defaults to an autogenerated value. When using this, it's your responsibility to ensure that the id for each switch is unique. It gets assigned to the |
DaffButtonSize| Default | – |
|---|---|
| Description | The size of the component. |
OutputEmitterRef<boolean>| Default | – |
|---|---|
| Description | Output event triggered when the switch has been toggled. |
ModelSignal<boolean>| Default | model(false) |
|---|---|
| Description | Current state of switch (on/off). |
"sm"| Default | – |
|---|---|
| Description | Sets a default size. |