SONAX Application UI

FormControl

Demos

Default

import { FormControl, ButtonIcon, SelectInput } from 'sxa-ui'
import {
  RiInformation2Line,
} from '@remixicon/react'

function Demo() {
  return (
    <FormControl
      label='Label'
      tooltip={
        <ButtonIcon
          tiny
          variant={ButtonIcon.variants.ghost}
          icon={RiInformation2Line}
        />
      }
      helpText='Note that there is only space for 120 characters'
    >
      <SelectInput placeholder='Placeholder' />
    </FormControl>
  )
}

export default Demo

Validation Feedback

import { FormControl, ButtonIcon, SelectInput } from 'sxa-ui'
import {
  RiInformation2Line,
} from '@remixicon/react'

function Demo() {
  return (
    <FormControl
      label='Label'
      error={'Error: validation feedback'}
      tooltip={
        <ButtonIcon
          tiny
          variant={ButtonIcon.variants.ghost}
          icon={RiInformation2Line}
        />
      }
      helpText='Note that there is only space for 120 characters'
    >
      <SelectInput placeholder='Placeholder' />
    </FormControl>
  )
}

export default Demo