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 @wx/svelte-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 source file of the Field control on a page:

App.svelte

<script>
    import { Field } from "@wx/svelte-core";
</script>

• use the <Field> tag to initialize a field:

App.svelte

<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" let:id >
    <Text {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 control with the <Field> tag, 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:

<Field label="Text" let:id />

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

<Field label="Text" let:id>
    <Control {id} />
</Field>

Related sample: Field

Positioning the label

By default a label is placed above the field with a nested control, but you can also put it to the left side of the field by setting the position property to the "left" value:

<Field label="Text" position="left" let:id>
    <Control {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, you need to 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" let:id>
    <Checkbox {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 control 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" let:id error >
    <Control {id} error />
</Field>

Related sample: Field