Skip to main content

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

NameTypeDefault
message
Error or warning message
string
type
Type of Validation
"warning" | "error"
"error"
minWidth
min-width for the component
string
data-{foo}
Data attributes can be used by testing libraries to retrieve components or assert their existence
string
* - the prop is required.