FieldError

Solidtype_heroui.Field_error is a field’s error, with the class HeroUI’s own fieldErrorVariants gives: Kobalte’s error message, a <span>, which the field it is in – a TextField, a NumberField, a Checkbox – shows while it is invalid and its input is described by. It is a field’s own: outside one it raises Invalid_argument.

Usage

HeroUI’s example: the error shows while the username is shorter than three characters.

UsernameUsername must be at least 3 characters

field_error_usage.mlx

module S = Solidtype.Solid
module Field_error = Solidtype_heroui.Field_error
module Input = Solidtype_heroui.Input
module Label = Solidtype_heroui.Label
module Text_field = Solidtype_heroui.Text_field

let make () =
  let value, set_value = S.create_signal "jr" in
  let invalid () =
    let n = String.length (S.get value) in
    n > 0 && n < 3
  in
  <Text_field
    class_="w-64"
    is_invalid=(fun () -> invalid ())
    value=(fun () -> S.get value)
    on_change=(S.set set_value)>
    <Label>"Username"</Label>
    <Input placeholder="Enter username" />
    <Field_error>"Username must be at least 3 characters"</Field_error>
  </Text_field>

Customization

Tailwind CSS

class_ is added after HeroUI’s classes.

HandleHandle must be at least 3 characters

field_error_tailwind.mlx

module S = Solidtype.Solid
module Field_error = Solidtype_heroui.Field_error
module Input = Solidtype_heroui.Input
module Label = Solidtype_heroui.Label
module Text_field = Solidtype_heroui.Text_field

let make () =
  let value, set_value = S.create_signal "jr" in
  let invalid () =
    let n = String.length (S.get value) in
    n > 0 && n < 3
  in
  <Text_field
    class_="w-64"
    is_invalid=(fun () -> invalid ())
    value=(fun () -> S.get value)
    on_change=(S.set set_value)>
    <Label>"Handle"</Label>
    <Input class_="bg-field font-mono" placeholder="min. 3 characters" />
    <Field_error class_="font-medium">
      "Handle must be at least 3 characters"
    </Field_error>
  </Text_field>

Styling Reference

CSS Classes

• .field-error

API Reference

React	solidtype	Type	Description
className	class_	string	Added after HeroUI’s class
children	children	elements	The error, but while a form’s server error for the field stands, which it shows instead
render function	—		Not yet

Beside React

Original HeroUI documentation: FieldError.