@salesforce/design-system-react
Version:
Salesforce Lightning Design System for React
82 lines (79 loc) • 2.59 kB
JSX
import React from 'react';
import Input from '~/components/input'; // `~` is replaced with design-system-react at runtime
import IconSettings from '~/components/icon-settings';
import InputIcon from '~/components/icon/input-icon';
class Example extends React.Component {
render() {
return (
<IconSettings iconPath="/assets/icons">
<section>
<ol>
<li className="slds-p-bottom_large">
<h1 className="slds-text-title_caps slds-p-vertical_medium">
1. Inline Help
</h1>
<Input
id="inline-help"
label="My Label"
inlineHelpText="ex: (415) 111-2222"
/>
</li>
<li className="slds-p-bottom_large">
<h1 className="slds-text-title_caps slds-p-vertical_medium">
2. Inline Help With Left Icon
</h1>
<Input
id="inline-help-with-left-icon"
label="My Label"
inlineHelpText="ex: (415) 111-2222"
iconLeft={<InputIcon name="search" category="utility" />}
/>
</li>
<li className="slds-p-bottom_large">
<h1 className="slds-text-title_caps slds-p-vertical_medium">
3. Inline Help With Right Icon
</h1>
<Input
id="inline-help-with-right-icon"
label="My Label"
inlineHelpText="ex: (415) 111-2222"
iconRight={<InputIcon name="search" category="utility" />}
/>
</li>
<li className="slds-p-bottom_large">
<h1 className="slds-text-title_caps slds-p-vertical_medium">
4. Inline Help With Error Text
</h1>
<Input
id="inline-help-with-error"
aria-describedby="inline-with-error-1"
name="inline-help-with-error"
label="My Label"
required
inlineHelpText="ex: (415) 111-2222"
errorText="This field is required."
/>
</li>
<li className="slds-p-bottom_large">
<h1 className="slds-text-title_caps slds-p-vertical_medium">
4. Inline Help With Error Text and Icon
</h1>
<Input
id="inline-help-with-error-and-icon"
aria-describedby="inline-with-error-2"
name="inline-help-with-error-and-icon"
label="My Label"
required
inlineHelpText="ex: (415) 111-2222"
errorText="This field is required."
iconLeft={<InputIcon name="error" category="utility" />}
/>
</li>
</ol>
</section>
</IconSettings>
);
}
}
Example.displayName = 'InlineHelpInputExample';
export default Example; // export is replaced with `ReactDOM.render(<Example />, mountNode);` at runtime