Features Select

The FeaturesSelect component provides a flexible way to create checkbox or radio-based feature selection cards.

Feature 1

Feature 2

Feature 3

---

Usage

import { FeaturesSelect } from "@newfold/ui-component-library";

<FeaturesSelect>
    <FeaturesSelect.Feature
        id="feature-1"
        name="feature-group"
        value="1"
    >
        Feature 1
    </FeaturesSelect.Feature>

    <FeaturesSelect.Feature
        id="feature-2"
        name="feature-group"
        value="2"
    >
        Feature 2
    </FeaturesSelect.Feature>

    <FeaturesSelect.Feature
        id="feature-3"
        name="feature-group"
        value="3"
    >
        Feature 3
    </FeaturesSelect.Feature>
</FeaturesSelect>

As shown in the example above, the FeaturesSelect component wraps a set of FeaturesSelect.Feature components. The FeaturesSelect can be used as container to control the behavior and layout of the features while each FeaturesSelect.Feature component represents an option card that can be selected by the user.

---

Behavior

You can use the behavior prop in the FeaturesSelect component to specify whether the feature cards should behave as checkboxes or radio buttons. The default behavior is checkbox.

1. Checkbox (default)

The checkbox behavior allows users to select multiple feature cards.

Feature 1

Feature 2

Feature 3

<FeaturesSelect behavior="checkbox">
    <FeaturesSelect.Feature
        id="feature-1"
        name="feature-group"
        value="1"
    >
        Feature 1
    </FeaturesSelect.Feature>

    <FeaturesSelect.Feature
        id="feature-2"
        name="feature-group"
        value="2"
    >
        Feature 2
    </FeaturesSelect.Feature>

    <FeaturesSelect.Feature
        id="feature-3"
        name="feature-group"
        value="3"
    >
        Feature 3
    </FeaturesSelect.Feature>
</FeaturesSelect>

2. Radio

The radio behavior allows users to select only one feature card.

Feature 1

Feature 2

Feature 3

<FeaturesSelect behavior="radio">
    <FeaturesSelect.Feature
        id="feature-1"
        name="feature-group"
        value="1"
    >
        Feature 1
    </FeaturesSelect.Feature>

    <FeaturesSelect.Feature
        id="feature-2"
        name="feature-group"
        value="2"
    >
        Feature 2
    </FeaturesSelect.Feature>

    <FeaturesSelect.Feature
        id="feature-3"
        name="feature-group"
        value="3"
    >
        Feature 3
    </FeaturesSelect.Feature>
</FeaturesSelect>

---

Layout

You can use the layout prop in the FeaturesSelect component to specify the layout of the feature cards. There are two layout options: 'row' and 'column'. The default layout is 'row'.

1. Row (default)

The row layout displays the feature cards in a horizontal row.

Feature 1

Feature 2

Feature 3

<FeaturesSelect layout="row">
    <FeaturesSelect.Feature
        id="feature-1"
        name="feature-group"
        value="1"
    >
        Feature 1
    </FeaturesSelect.Feature>

    <FeaturesSelect.Feature
        id="feature-2"
        name="feature-group"
        value="2"
    >
        Feature 2
    </FeaturesSelect.Feature>

    <FeaturesSelect.Feature
        id="feature-3"
        name="feature-group"
        value="3"
    >
        Feature 3
    </FeaturesSelect.Feature>
</FeaturesSelect>

2. Column

The column layout displays the feature cards in a vertical column.

Feature 1

Feature 2

Feature 3

<FeaturesSelect layout="column">
    <FeaturesSelect.Feature
        id="feature-1"
        name="feature-group"
        value="1"
    >
        Feature 1
    </FeaturesSelect.Feature>

    <FeaturesSelect.Feature
        id="feature-2"
        name="feature-group"
        value="2"
    >
        Feature 2
    </FeaturesSelect.Feature>

    <FeaturesSelect.Feature
        id="feature-3"
        name="feature-group"
        value="3"
    >
        Feature 3
    </FeaturesSelect.Feature>
</FeaturesSelect>

info

To limit the width of the feature cards in the column layout, you can use the className prop to apply custom CSS classes. (see example below)

<FeaturesSelect.Feature
        id="feature-1"
        name="feature-group"
        value="1"
        className="nfd-w-fit"
    >
    Feature 1
</FeaturesSelect.Feature>

---

Props

Attribute	Type	Description	Default
behavior	checkbox | radio |	Input behavior.	checkbox
layout	row | column |	Layout direction.	row
className	string |	CSS class.	-
children	node |	-	-

---

FeaturesSelect.Feature

The FeaturesSelect.Feature component is used to create a feature card that can be selected by the user.

import { FeaturesSelect } from "@newfold/ui-component-library";

<FeaturesSelect.Feature
    id="feature-1"
    name="feature-group"
    value="1"
    className="nfd-w-fit"
>
    Feature 1
</FeaturesSelect.Feature>

---

Label

Use the label prop to render a label under the feature card.

Feature 1 with label

Feature 1

<FeaturesSelect.Feature
    id="feature-1"
    name="feature-group"
    value="1"
    className="nfd-w-fit"
    label="Feature 1"
>
    Feature 1 with label
</FeaturesSelect.Feature>

---

Disabled

Use the disabled prop to disable the feature card.

Feature 1

<FeaturesSelect.Feature
    id="feature-1"
    name="feature-group"
    value="1"
    className="nfd-w-fit"
    disabled
>
    Feature 1
</FeaturesSelect.Feature>

---

FeaturesSelect.Feature Props

Attribute	Type	Description	Default
id*	string |	Input ID.	-
name*	string |	Input group name.	-
value*	string |	Input value.	-
type	checkbox | radio |	Input type. When used inside a FeaturesSelect component, the type is inherited from the parent.	checkbox
label	string |	Input label to render under the card.	-
labelTextAlign	left | right | center |	Text alignment for the label.	center
disabled	boolean |	Disables the input.	-
screenReaderLabel*	string |	Screen reader label.	-
className	string |	CSS class.	-
Children	node |	Children.	-