Radio
A radio input allows people to select only one option from a number of choices. Radio is generally displayed in a radio group.
Default
The default way to present a single option from a list. In most situations where you want to present a list of mutually exclusive options, you will want to use a radio group.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import React from 'react';
import Radio from '@neoKit/Radio';
const RadioDefaultExample = () => {
return (
<>
<form>
<Radio
value='Default_radio '
label='Default radio'
name='radio-default'
id='radio-default'
isChecked={false}
onChange={() => {}}
></Radio>
</form>
</>
);
};
export default RadioDefaultExample;
Disabled
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import React from 'react';
import Radio from '@neoKit/Radio';
const RadioDisabledExample = () => {
return (
<>
<form>
<Radio
value='disabed_radio'
label='Disabed radio'
name='radio-disabed'
id='radio-disabed'
isChecked={true}
isDisabled={true}
onChange={() => {}}
></Radio>
</form>
</>
);
};
export default RadioDisabledExample;
Complex radio usage
There may be some situations where you are unable to directly stack the radio inputs vertically. In those situations, using individual Radio components rather than a RadioGroup may be more suited to your needs.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
import React from 'react';
import Radio from '@neoKit/Radio';
const RadioInputExample = () => {
const tableDAta = [
{
id: 1,
value: "1",
name: "branch",
description: "master",
commit: "dcc0f15",
updated: "14 minutes ago"
},
{
id: 2,
value: "2",
name: "branch",
description: "feature/dark-mode",
commit: "cbc0fa3",
updated: "56 minutes ago"
},
{
id: 3,
value: "3",
name: "branch",
description: "feature/right-to-left",
commit: "69568ea",
updated: "16 hours ago"
},
{
id: 4,
value: "4",
name: "branch",
description: "bug/type-incorrect-for-checked-prop",
commit: "1159c76",
updated: "yesterday"
}
];
const [value, setValue] = useState('1');
return (
<>
<form>
<table className='min-w-full leading-normal'>
<thead>
<tr className='text-left'>
<th style={{ width: 0 }} className="px-3 py-3" />
<th id='head-description' className="px-3 py-3">Branch</th>
<th id='head-commit' className="px-3 py-3">Last commit</th>
<th id='head-updated' className="px-3 py-3">Updated</th>
</tr>
</thead>
<tbody>
{tableDAta.map((item) => (
<tr onClick ={()=> setValue(item.value)}>
<td style={{ width: 24, paddingRight: 0 ,padding:"12px" }}>
<Radio
value={item.value}
name={item.name}
id={item.id}
isChecked={value === item.value ? true : false}
// isDisabled={true}
checked={value === item.value ? true : false}
onChange={() => {}}
></Radio>
</td>
<td className="px-3 py-3">{item.description}</td>
<td className="px-3 py-3"> {item.commit} </td>
<td className="px-3 py-3"> {item.updated}</td>
</tr>
))}
</tbody>
</table>
</form>
</>
);
};
export default RadioInputExample;