Switch
import Switch from 'frui/fields/Switch';Props
Switch accepts all props of a standard HTML input element. See Moz for standard input attributes.
| Name | Type | Required | Notes |
|---|---|---|---|
| blue | boolean | No | Show blue switch |
| check | boolean | No | Show check when checked |
| checked | boolean | No | Default checked state (Controlled) |
| checkex | boolean | No | Use check/ex switch |
| className | string | No | Standard HTML class names |
| defaultChecked | string | No | Default checked state (Uncontrolled) |
| defaultValue | string | No | Default value (Uncontrolled) |
| green | boolean | No | Show green/red switch |
| error | string|boolean | No | Any error message |
| label | string | No | Shows text to the right of switch |
| name | string | No | Used for react server components. |
| onChange | Function | No | Event handler when value has changed |
| onoff | boolean | No | Use on/off switch |
| onUpdate | Function | No | Update event handler |
| orange | boolean | No | Show orange switch |
| passRef | LegacyRef | No | Passes ref to html input |
| ridge | boolean | No | Adds ridges to knobs |
| rounded | boolean | No | Make switch rounded |
| style | CSS Object | No | Standard CSS object |
| sunmoon | boolean | No | Use sun/moon switch |
| value | string | No | Default value (Controlled) |
| yesno | boolean | No | Use yes/no switch |
Basics
Switch wraps the HTML standard `<input />` element. Therefore, you can use any input attributes as props.
<Switch name="name" value="yes" defaultChecked />Events
onUpdate is like onChange except the value is passed instead of the change event.
<Switch onUpdate={(value, checked) => alert(`${value} - ${checked}`)} />On Change
The onChange event is triggered when the value has changed. The following arguments are passed to the event handler:
| Name | Type | Sample |
|---|---|---|
| event | Event Object | see: Change Event |
On Update
The onUpdate event is triggered when the value has been updated. The following arguments are passed to the event handler:
| Name | Type | Sample |
|---|---|---|
| value | string | `foobar` |
Errors
You can pass the error prop to highlight the Switch field red.
<Switch error defaultChecked />Custom Styles
You can apply rounded, colors and shapes to the Switch component.
Ridge
Use ridge prop to add ridges to the knobs.
<Switch ridge defaultChecked />Rounded
Use rounded prop to make the switches circular.
<Switch rounded defaultChecked />Colors
Use blue, orange or green prop to change the color of switches.
<Switch blue label="Blue" defaultChecked />Shapes
Use onoff, yesno, checkex or sunmoon prop to change the color of switches.
<Switch onoff label="Blue" defaultChecked />Combniations
Try different combinations to get the switch you want.
You can also add your own custom class to Switch components or use any combination of frui-field-option, frui-field-option-control, and frui-field-option-label CSS classes.