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!' />

<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> ); }

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' /> </>

<>
  <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' /> </>

<>
  <ValidationText message='Error text!' minWidth='250px' />
  <ValidationText message='Warning text!' type='warning' />
</>

Result

Loading...

Props

Name	Type	Default
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.