Field

The Field control presents a container with a label for another control which is placed inside it. You can set the control's width and specify the label's position relative to the control. For Checkbox, Switch, Slider and RadioButton, it's possible to provide correct positioning by setting the corresponding control's type. When you need to apply error styling to a control, its label can be styled accordingly.

Related resources

• Get the widget by installing the @svar-ui/react-core package.
• Check Field API Reference to see the list of configuration properties.
• Explore the samples to visualize the available features.

Initialization

To create a Field instance on a page, you need to:

• import the Field component from the library:

App.tsx

import { Field } from "@svar-ui/react-core";

• use the <Field> component inside your React component:

App.tsx

function App() {
  return <Field />;
}

Setting the width of a field

You can specify the width necessary for a field to place a control inside. For this purpose, use the width property in the following way:

<Field label="Text" width="300px">
  {({ id }) => <Text id={id} />}
</Field>

Since the Field control wraps a nested control, the width of the control adjusts to the field's one in case its own width is set as width:100%.

Setting a label for a control

The Field control is highly useful when you need to add a label to another SVAR control. For this, you need to:

• create a Field component and add a desired label via the label property and set the position of the label, if needed:

<Field label="Text" />

• specify the id variable to bind the field and the control(s) in question by using a function-as-children. The Field will call the children function with an id value that you pass to nested control(s):

<Field>
  {({ id }) => /* use id in nested controls */ null}
</Field>

• wrap the necessary control(s) in the <Field> component and pass the id property to the nested control to link it to the Field:

<Field label="Text">
  {({ id }) => <Control id={id} />}
</Field>

Related sample: Field

Positioning the label

To put the label to the left side of the field set the position property to the "left" value:

<Field label="Text" position="left">
  {({ id }) => <Control id={id} />}
</Field>

Related sample: Field

Left-side label for Checkbox, Radio, Switch, Slider

When Checkbox, Radio Button, Switch or Slider controls are nested in a field with a left-side label, they require accurate positioning. To achieve this, use the type property of Field with the corresponding type of the control specified: "checkbox" (for Checkbox and Radio Button), "switch" or "slider". Here's what it looks like for a checkbox:

<Field label="Checkbox" type="checkbox" position="left">
  {({ id }) => <Checkbox id={id} />}
</Field>

Related sample: Checkbox

Styling a validation error

When you use a field with a nested control inside a form and a wrong value is passed to the control, you can use error styling to show that validation has failed. For this you need:

• to use the error property of the Field component to make the label of the nested control red:

<Field label="Text" error />

• to enable error styling for the control inside the field by using its error property:

<Field label="Text label" error>
  {({ id }) => <Control id={id} error />}
</Field>

Related sample: Field