ValidationText
ValidationText is a component for Error Handling. Making it easier for developers to use standardized and consistent validation.
Live Editor
<ValidationText message='Error text!' />
Result
Loading...
Working Example
Live Editor
function controlledSegmentedButton() { const [value, setValue] = useState('hours'); const items = [ { value: 'hours', label: 'Hours' }, { value: 'days', label: 'Days' } ]; const message = "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum" return ( <div style={{width: '380px'}}> <div style={{ display: 'flex', alignItems: 'end', justifyContent: 'space-between', padding: "8px 0" }} > <Input label="Username" onChange={() => {}} /> <SegmentedButton items={items} value={value} onChange={event => setValue(event.target.value)} /> <Badge label="Default" color="primary" css={{margin: "6px 0"}}/> </div> <ValidationText message={message} /> </div> ); }
Result
Loading...
Variants
We have 2 variant that we support can see under prop type
, default 'error'.
Live Editor
<> <ValidationText message='Error text!' /> <ValidationText message='Warning text!' type='warning' /> </>
Result
Loading...
We also support min-width using minWidth
prop.
Live Editor
<> <ValidationText message='Error text!' minWidth='250px' /> <ValidationText message='Warning text!' type='warning' /> </>
Result
Loading...
Props
Name | Type | Default |
---|---|---|
message Error or warning message |
| — |
type Type of Validation |
| "error" |
minWidth min-width for the component |
| — |
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence |
| — |
* - the prop is required. |