Components
Switch
Switch gives users a choice between two alternatives. The switch can either be turned off or on and must always be set with a default choice.
React
const Preview = () => { return <Switch label='Switch' />; }; render(<Preview />)
- aria-label
- Description
Optional aria-label
- Type
string
- label
- Description
Switch label
- Type
any
- description
- Description
Description for field
- Type
any
- value
- Description
Value of the `input` element
- Type
InputProps
- position
- Description
Position of switch
- Type
FieldProps- Default
start
- aria-labelledby
- Type
string
| Name | Type | Default | Description |
|---|---|---|---|
| aria-label | string | - | Optional aria-label |
| label | any | - | Switch label |
| description | any | - | Description for field |
| value | InputProps | - | Value of the `input` element |
| position | FieldProps | start | Position of switch |
| aria-labelledby | string | - | - |
Usage
Examples
Grouping
Use Fieldset to group multiple Switch components together.
React
const GroupEn = () => { return ( <Fieldset> <Fieldset.Legend>Turn lights on/off</Fieldset.Legend> <Switch label='Living room' checked /> <Switch label='Kitchen' /> <Switch label='Bathroom' /> <Switch label='Bedroom' description='Unable to connect to the light bulbs' readOnly /> </Fieldset> ); }; render(<GroupEn />)
Right-aligned
Use position="end" to position Switch on the right side of the prompt if
you need it.
React
const RightAlignedEn = () => { return <Switch label='Flight mode' position='end' defaultChecked />; }; render(<RightAlignedEn />)
HTML
The class name ds-input is added to <input> along with type="checkbox" and role="switch".
To mirror what the composite component in React does, you need to use ds-field together with a <label>.
To right-align <input>, add data-position="end" to ds-field.
CSS variables and data attributes
Switch is a composite component, so we show variables and data attributes from ds-input here.
| Name | Value |
|---|---|
| --dsc-input-padding | var(--ds-size-2) var(--ds-size-3) |
| --dsc-input-size--toggle | var(--ds-size-6) |
| --dsc-input-size | var(--ds-size-12) |
| --dsc-input-background--readonly | var(--ds-color-neutral-surface-tinted) |
| --dsc-input-background | var(--ds-color-neutral-surface-default) |
| --dsc-input-border-color--readonly | var(--ds-color-neutral-border-subtle) |
| --dsc-input-border-color | var(--ds-color-neutral-border-default) |
| --dsc-input-border-style | solid |
| --dsc-input-border-width--toggle | max(var(--ds-border-width-default),calc(var(--ds-size-1)/2)) |
| --dsc-input-border-width | var(--ds-border-width-default) |
| --dsc-input-outline-color--hover | var(--ds-color-neutral-border-default) |
| --dsc-input-outline-color--toggle--hover | var(--dsc-input-accent-color) |
| --dsc-input-outline-width--hover | var(--ds-border-width-default) |
| --dsc-input-outline-style--hover | solid |
| --dsc-input-color--readonly | var(--ds-color-neutral-text-default) |
| --dsc-input-color | var(--ds-color-neutral-text-default) |
| --dsc-input-stroke-color | var(--ds-color-base-contrast-default) |
| --dsc-input-stroke-color--invalid | var(--ds-color-danger-base-contrast-default) |
| --dsc-input-stroke-width | 0.05em |
| --dsc-input-accent-color | var(--ds-color-base-default) |
| --dsc-input-accent-color--invalid | var(--ds-color-danger-text-subtle) |
| Name | Value |
|---|---|
| data-width | auto |