Toggle
A toggle is used to view or switch between enabled or disabled states.
Default
The default form of a toggle. For pages with lots of toggles, use the default size.
Allow pull requests
1
2
3
4
5
6
7
8
9
10
11
12
import React from 'react';
import Toggle from '@neoKit/toggle';
export defaultToggleExample() {
return (
<>
<Toggler id="toggle-default" />
</>
);
}
Color
The default form of a toggle. For pages with lots of toggles, use the default size.
Allow pull requests
1
2
3
4
5
6
7
8
9
10
import React from 'react';
import Toggle from '@neoKit/toggle';
export coloredExample() {
return (
<>
<Toggler name='toggle' id='toggleID' color='red' onChange={(value) => {}} value={true}></Toggler>
</>
);}Toggle State
The default form of a toggle. For pages with lots of toggles, use the default size.
Allow pull requests
1
2
3
4
5
6
7
8
9
10
11
12
import React from 'react';
import Toggle from '@neoKit/toggle';
export toggleStateExample() {
return (
<>
<Toggler name='toggle' id='toggleID' disabled value ={true} onChange={(value) => {}} value={true}></Toggler>
</>
);
}
Disabled
A toggle is disabled when a selection has already been made outside of the current context that negates the need for the toggle.
Allow pull requests
1
2
3
4
5
6
7
8
9
10
import React from 'react';
import Toggle from '@neoKit/toggle';
export diabledToggleExample() {
return (
<>
<Toggler name='toggle' id='toggleID' disabled onChange={(value) => {}} value={true}></Toggler>
</>
);}Icon
Toggle button with icon
Allow pull requests
1
2
3
4
5
6
7
8
9
10
11
import React from 'react';
import Toggle from '@neoKit/toggle';
export toggleStateExample() {
return (
<>
<Toggler name='toggle' id='toggleID' disabled icon={true} onChange={(value) => {}} value={true}></Toggler>
</>
);
}