Fields
<Input defaultValue="Standard" />
<Input defaultValue="Disabled" disabled />
<Input defaultValue="Adornments addon"
addonBefore="http://"
addonAfter=".com"
/>
<Input defaultValue="Adornments" prefix="http://" suffix=".com" />
<Input.Search defaultValue="Search" />
<Input.Password placeholder="Password" />
<Input.TextArea showCount maxLength={100} />
CheckBoxes
<Checkbox.Group
options={[
{ label: "Selected", value: "1" },
{ label: "Disabled", value: "2", disabled: true },
{ label: "Active", value: "4" },
]}
defaultValue={["1"]}
/>
<Checkbox indeterminate={true}>Indeterminate</Checkbox>
Date time pickers
<DatePicker />
<DatePicker picker="week" />
<DatePicker picker="month" />
<DatePicker picker="quarter" />
<DatePicker picker="year" />
<RangePicker />
<DatePicker showTime placeholder="Select date and time" />
<TimePicker />
Radios
const [value, setValue] = useState(1);
<Radio.Group value={value} onChange={(e) => setValue(e.target.value)}>
<Radio value={1}>Selected</Radio>
<Radio value={2} disabled>Disabled</Radio>
<Radio value={3}>Active</Radio>
</Radio.Group>
Select
<Cascader placeholder="Please select"
options={[
{value: "1", label: "Item 1", children: [{value: "1.1", label: "Item 1.1"}]},
{value: "2", label: "Item 2", children: [{value: "2.1", label: "Item 2.1"}]},
{value: "3", label: "Item 3" disabled: true},
]}
/>
<Select defaultValue="1">
<Select.Option value="1">Item 1</Select.Option>
<Select.Option value="2">Item 2</Select.Option>
<Select.Option value="3" disabled>
Item 3
</Select.Option>
</Select>
<Select defaultValue={["1", "2"]} mode="multiple" allowClear>
<Select.Option value="1">Item 1</Select.Option>
<Select.Option value="2">Item 2</Select.Option>
<Select.Option value="3" disabled>
Item 3
</Select.Option>
</Select>
<TreeSelect
placeholder="Please select"
showSearch
allowClear
treeDefaultExpandAll
>
<TreeSelect.TreeNode value="1" title="Item 1">
<TreeSelect.TreeNode value="1.1" title="Item 1.1" />
</TreeSelect.TreeNode>
<TreeSelect.TreeNode value="2" title="Item 2">
<TreeSelect.TreeNode value="2.1" title="Item 2.1" />
</TreeSelect.TreeNode>
</TreeSelect>
Sliders
<Slider marks={{ 50: "50%" }} defaultValue={10} />
<Slider range defaultValue={[10, 50]} />
Switches
<Switch defaultChecked />
<Switch size="small" />
<Switch disabled />
<Switch checkedChildren="Y" unCheckedChildren="N" />
Rate
<Rate allowHalf defaultValue={2.5} />
Transfer
<Transfer
dataSource={[
{ title: "Item 1", key: "item1" },
{ title: "Item 2", key: "item2" },
]}
titles={["Source", "Target"]}
render={(item) => item.title}
pagination
/>