DevExtreme Accessibility Compliance
DevExtreme component libraries meet a variety of WCAG and Section 508 compliance standards. To assess this demo's accessibility level, click the Run AXE® Validation button to launch the AXE® web accessibility evaluation tool.
All trademarks or registered trademarks are property of their respective owners. AXE® Terms of Use
The overall accessibility level of your application depends on the Form features used.
Backend API
import React, { useCallback, useState } from 'react';
import CheckBox, { type CheckBoxTypes } from 'devextreme-react/check-box';
import SelectBox, { type SelectBoxTypes } from 'devextreme-react/select-box';
import NumberBox, { type NumberBoxTypes } from 'devextreme-react/number-box';
import Form, { type FormTypes } from 'devextreme-react/form';
import { companies } from './data.ts';
import type { Company } from './types.ts';
const labelModes = ['outside', 'static', 'floating', 'hidden'];
const labelLocations = ['left', 'top'];
const columnsCount = ['auto', 1, 2, 3];
const minColumnWidths = [150, 200, 300];
const widthLabel = { 'aria-label': 'Width' };
const companyLabel = { 'aria-label': 'Company' };
const labelModeLabel = { 'aria-label': 'Label Mode' };
const labelLocationLabel = { 'aria-label': 'Label Location' };
const columnCountLabel = { 'aria-label': 'Column Count' };
const minCountWidthLabel = { 'aria-label': 'Min Count Width' };
const App = () => {
const [labelMode, setLabelMode] = useState<FormTypes.Properties['labelMode']>('floating');
const [labelLocation, setLabelLocation] = useState<FormTypes.Properties['labelLocation']>('left');
const [readOnly, setReadOnly] = useState<boolean>(false);
const [showColon, setShowColon] = useState<boolean>(true);
const [minColWidth, setMinColWidth] = useState<number>(300);
const [colCount, setColCount] = useState<number>(2);
const [company, setCompany] = useState<Company>(companies[0]);
const [width, setWidth] = useState<number>();
const onCompanyChanged = useCallback(({ value }: SelectBoxTypes.ValueChangedEvent): void => {
setCompany(value);
}, []);
const onLabelModeChanged = useCallback(({ value }: SelectBoxTypes.ValueChangedEvent): void => {
setLabelMode(value);
}, []);
const onLabelLocationChanged = useCallback(({ value }: SelectBoxTypes.ValueChangedEvent): void => {
setLabelLocation(value);
}, []);
const onReadOnlyChanged = useCallback(({ value }: CheckBoxTypes.ValueChangedEvent): void => {
setReadOnly(value);
}, []);
const onShowColonChanged = useCallback(({ value }: CheckBoxTypes.ValueChangedEvent): void => {
setShowColon(value);
}, []);
const onMinColWidthChanged = useCallback(({ value }: SelectBoxTypes.ValueChangedEvent): void => {
setMinColWidth(value);
}, []);
const onColumnsCountChanged = useCallback(({ value }: SelectBoxTypes.ValueChangedEvent): void => {
setColCount(value);
}, []);
const onFormWidthChanged = useCallback(({ value }: NumberBoxTypes.ValueChangedEvent): void => {
setWidth(value);
}, []);
const companySelectorLabelMode: SelectBoxTypes.Properties['labelMode'] = labelMode === 'outside'
? 'hidden'
: labelMode;
return (
<div id="form-demo">
<div className="widget-container">
{labelMode === 'outside' && (<div>Select company:</div>)}
<SelectBox
displayExpr="Name"
dataSource={companies}
inputAttr={companyLabel}
labelMode={companySelectorLabelMode}
label='Select company'
value={company}
onValueChanged={onCompanyChanged}
/>
<Form
id="form"
labelMode={labelMode}
formData={company}
readOnly={readOnly}
showColonAfterLabel={showColon}
labelLocation={labelLocation}
minColWidth={minColWidth}
colCount={colCount}
width={width}
/>
</div>
<div className="options">
<div className="caption">Options</div>
<div className="option">
<span>Label mode:</span>
<SelectBox
items={labelModes}
inputAttr={labelModeLabel}
value={labelMode}
onValueChanged={onLabelModeChanged}
/>
</div>
<div className="option">
<span>Label location:</span>
<SelectBox
items={labelLocations}
inputAttr={labelLocationLabel}
value={labelLocation}
onValueChanged={onLabelLocationChanged}
/>
</div>
<div className="option">
<span>Columns count:</span>
<SelectBox
items={columnsCount}
value={colCount}
inputAttr={columnCountLabel}
onValueChanged={onColumnsCountChanged}
/>
</div>
<div className="option">
<span>Min column width:</span>
<SelectBox
items={minColumnWidths}
value={minColWidth}
inputAttr={minCountWidthLabel}
onValueChanged={onMinColWidthChanged}
/>
</div>
<div className="option">
<span>Form width:</span>
<NumberBox
max={550}
value={width}
inputAttr={widthLabel}
onValueChanged={onFormWidthChanged}
/>
</div>
<div className="option">
<CheckBox
text="readOnly"
value={readOnly}
onValueChanged={onReadOnlyChanged}
/>
</div>
<div className="option">
<CheckBox
text="showColonAfterLabel"
value={showColon}
onValueChanged={onShowColonChanged}
/>
</div>
</div>
</div>
);
};
export default App;
import React, { useCallback, useState } from 'react';
import CheckBox from 'devextreme-react/check-box';
import SelectBox from 'devextreme-react/select-box';
import NumberBox from 'devextreme-react/number-box';
import Form from 'devextreme-react/form';
import { companies } from './data.js';
const labelModes = ['outside', 'static', 'floating', 'hidden'];
const labelLocations = ['left', 'top'];
const columnsCount = ['auto', 1, 2, 3];
const minColumnWidths = [150, 200, 300];
const widthLabel = { 'aria-label': 'Width' };
const companyLabel = { 'aria-label': 'Company' };
const labelModeLabel = { 'aria-label': 'Label Mode' };
const labelLocationLabel = { 'aria-label': 'Label Location' };
const columnCountLabel = { 'aria-label': 'Column Count' };
const minCountWidthLabel = { 'aria-label': 'Min Count Width' };
const App = () => {
const [labelMode, setLabelMode] = useState('floating');
const [labelLocation, setLabelLocation] = useState('left');
const [readOnly, setReadOnly] = useState(false);
const [showColon, setShowColon] = useState(true);
const [minColWidth, setMinColWidth] = useState(300);
const [colCount, setColCount] = useState(2);
const [company, setCompany] = useState(companies[0]);
const [width, setWidth] = useState();
const onCompanyChanged = useCallback(({ value }) => {
setCompany(value);
}, []);
const onLabelModeChanged = useCallback(({ value }) => {
setLabelMode(value);
}, []);
const onLabelLocationChanged = useCallback(({ value }) => {
setLabelLocation(value);
}, []);
const onReadOnlyChanged = useCallback(({ value }) => {
setReadOnly(value);
}, []);
const onShowColonChanged = useCallback(({ value }) => {
setShowColon(value);
}, []);
const onMinColWidthChanged = useCallback(({ value }) => {
setMinColWidth(value);
}, []);
const onColumnsCountChanged = useCallback(({ value }) => {
setColCount(value);
}, []);
const onFormWidthChanged = useCallback(({ value }) => {
setWidth(value);
}, []);
const companySelectorLabelMode = labelMode === 'outside' ? 'hidden' : labelMode;
return (
<div id="form-demo">
<div className="widget-container">
{labelMode === 'outside' && <div>Select company:</div>}
<SelectBox
displayExpr="Name"
dataSource={companies}
inputAttr={companyLabel}
labelMode={companySelectorLabelMode}
label="Select company"
value={company}
onValueChanged={onCompanyChanged}
/>
<Form
id="form"
labelMode={labelMode}
formData={company}
readOnly={readOnly}
showColonAfterLabel={showColon}
labelLocation={labelLocation}
minColWidth={minColWidth}
colCount={colCount}
width={width}
/>
</div>
<div className="options">
<div className="caption">Options</div>
<div className="option">
<span>Label mode:</span>
<SelectBox
items={labelModes}
inputAttr={labelModeLabel}
value={labelMode}
onValueChanged={onLabelModeChanged}
/>
</div>
<div className="option">
<span>Label location:</span>
<SelectBox
items={labelLocations}
inputAttr={labelLocationLabel}
value={labelLocation}
onValueChanged={onLabelLocationChanged}
/>
</div>
<div className="option">
<span>Columns count:</span>
<SelectBox
items={columnsCount}
value={colCount}
inputAttr={columnCountLabel}
onValueChanged={onColumnsCountChanged}
/>
</div>
<div className="option">
<span>Min column width:</span>
<SelectBox
items={minColumnWidths}
value={minColWidth}
inputAttr={minCountWidthLabel}
onValueChanged={onMinColWidthChanged}
/>
</div>
<div className="option">
<span>Form width:</span>
<NumberBox
max={550}
value={width}
inputAttr={widthLabel}
onValueChanged={onFormWidthChanged}
/>
</div>
<div className="option">
<CheckBox
text="readOnly"
value={readOnly}
onValueChanged={onReadOnlyChanged}
/>
</div>
<div className="option">
<CheckBox
text="showColonAfterLabel"
value={showColon}
onValueChanged={onShowColonChanged}
/>
</div>
</div>
</div>
);
};
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.tsx';
ReactDOM.render(
<App />,
document.getElementById('app'),
);
import type { Company } from './types.ts';
export const companies: Company[] = [{
ID: 1,
Name: 'Super Mart of the West',
Address: '702 SW 8th Street',
City: 'Bentonville',
State: 'Arkansas',
ZipCode: 72716,
Phone: '(800) 555-2797',
Fax: '(800) 555-2171',
Website: '',
Active: true,
}, {
ID: 2,
Name: 'Electronics Depot',
Address: '2455 Paces Ferry Road NW',
City: 'Atlanta',
State: 'Georgia',
ZipCode: 30339,
Phone: '(800) 595-3232',
Fax: '(800) 595-3231',
Website: '',
Active: true,
}, {
ID: 3,
Name: 'K&S Music',
Address: '1000 Nicllet Mall',
City: 'Minneapolis',
State: 'Minnesota',
ZipCode: 55403,
Phone: '(612) 304-6073',
Fax: '(612) 304-6074',
Website: '',
Active: true,
}, {
ID: 4,
Name: "Tom's Club",
Address: '999 Lake Drive',
City: 'Issaquah',
State: 'Washington',
ZipCode: 98027,
Phone: '(800) 955-2292',
Fax: '(800) 955-2293',
Website: '',
Active: true,
}];
export type Company = {
ID: number;
Name: string;
Address: string;
City: string;
State: string;
ZipCode: number;
Phone: string;
Fax: string;
Website: string;
Active: boolean;
};
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
export const companies = [
{
ID: 1,
Name: 'Super Mart of the West',
Address: '702 SW 8th Street',
City: 'Bentonville',
State: 'Arkansas',
ZipCode: 72716,
Phone: '(800) 555-2797',
Fax: '(800) 555-2171',
Website: '',
Active: true,
},
{
ID: 2,
Name: 'Electronics Depot',
Address: '2455 Paces Ferry Road NW',
City: 'Atlanta',
State: 'Georgia',
ZipCode: 30339,
Phone: '(800) 595-3232',
Fax: '(800) 595-3231',
Website: '',
Active: true,
},
{
ID: 3,
Name: 'K&S Music',
Address: '1000 Nicllet Mall',
City: 'Minneapolis',
State: 'Minnesota',
ZipCode: 55403,
Phone: '(612) 304-6073',
Fax: '(612) 304-6074',
Website: '',
Active: true,
},
{
ID: 4,
Name: "Tom's Club",
Address: '999 Lake Drive',
City: 'Issaquah',
State: 'Washington',
ZipCode: 98027,
Phone: '(800) 955-2292',
Fax: '(800) 955-2293',
Website: '',
Active: true,
},
];
<!DOCTYPE html>
<html lang="en">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="./bundle.css" />
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
<script src="bundles/vendor/react.vendor.js"></script>
<script src="./bundle.js"></script>
</body>
</html>
.widget-container {
margin-right: 320px;
padding: 20px;
max-width: 550px;
min-width: 300px;
}
#form {
margin-top: 25px;
}
.options {
padding: 20px;
position: absolute;
bottom: 0;
right: 0;
width: 260px;
top: 0;
background-color: rgba(191, 191, 191, 0.15);
}
.caption {
font-size: 18px;
font-weight: 500;
}
.option {
margin-top: 10px;
}
You can use the editors on the right to modify the following properties:
-
labelMode: "outside" | "static" | "floating" | "hidden"
Specifies label display mode. -
labelLocation: "top" | "left" | "right"
Specifies whether to place outer labels above, to the left, or to the right of corresponding editors. The latter location is not demonstrated in this example. -
colCount
Specifies the number of columns in the layout. To build an adaptive layout where the column count depends on the container width, set this property's value to "auto". -
minColWidth
Specifies the minimum column width. Use this property when the colCount property's value is "auto". -
width
Specifies the Form component's width. -
readOnly
Makes the Form editors read-only. -
showColonAfterLabel
Specifies whether the Form displays a colon after a label.
To get started with the DevExtreme Form component, refer to the following tutorial for step-by-step instructions: Getting Started with Form.