logo

Switch

Switching Selector.

When To Use

  • If you need to represent the switching between two states or on-off state.
  • The difference between Switch and Checkbox is that Switch will trigger a state change directly when you toggle it, while Checkbox is generally used for state marking, which should work in conjunction with submit operation.

Examples

The most basic usage.

expand code expand code

With text and icon.

expand code expand code

Mark a pending state of switch.

expand code expand code

Disabled state of Switch.

expand code expand code

size=small represents a small sized switch.

expand code expand code

The status of Switch is completely up to the user and no longer automatically changes the data based on the click event.

expand code expand code

Switch API#

Property Description Type Default Value
Loading ParameterWhether switch is loading or not. Will display spinner on handle when true. Boolean false
CheckedChildren ParameterString displayed inside switch when checked is true String --
CheckedChildrenTemplate ParameterContent displayed inside switch when checked is true. Takes priority over AntDesign.Switch.CheckedChildren. RenderFragment --
Control ParameterWhen true, the status of Switch no longer automatically changes the data based on the click event. Boolean false
OnClick ParameterCallback executed when the switch is clicked. When used in combination with AntDesign.Switch.Control it allows manually controlling the Switch. EventCallback --
UnCheckedChildren ParameterString displayed inside switch when checked is false. String --
UnCheckedChildrenTemplate ParameterContent displayed inside switch when checked is false. Takes priority over AntDesign.Switch.UnCheckedChildren. RenderFragment --
AutoFocus ParameterWhether to autofocus on the input or not Boolean false
Checked ParameterIf the input is checked or not Boolean false
OnChange ParameterCallback executed when the input changes EventCallback<Boolean> --
CheckedChanged ParameterGets or sets a callback that updates the bound checked value. EventCallback<Boolean> --
Disabled ParameterDisable the input Boolean false
ValidationMessages Validation messages for the FormItem String[] --
AdditionalAttributes ParameterGets or sets a collection of additional attributes that will be applied to the created element. IReadOnlyDictionary<String, Object> --
Value ParameterGets or sets the value of the input. This should be used with two-way binding. Boolean --
ValueChanged ParameterCallback that updates the bound value. EventCallback<Boolean> --
ValueExpression ParameterAn expression that identifies the bound value. Expression<Func<Boolean>> --
ValuesExpression ParameterAn expression that identifies the enumerable of bound values. Expression<Func<IEnumerable<Boolean>>> --
Size ParameterThe size of the input box. Note: in the context of a form, the `large` size is used. Available: `large` `default` `small` String AntSizeLDSType.Default
CultureInfo ParameterWhat Culture will be used when converting string to value and value to string Useful for InputNumber component. CultureInfo CultureInfo.CurrentCulture
Id ParameterID for the component's HTML String Uniquely Generated ID
Class ParameterSpecifies one or more class names for an DOM element. String --
Style ParameterSpecifies an inline style for a DOM element. String --
RefBack ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. ForwardRef --
Slider TimePicker
文档已更新,请点击 此处 更新。
A new version of this app is available. Click here to update.