Segmented Control No Value

import { Layout } from '@/layout';

export const meta = { title: 'Can I use SegmentedControl with empty value?', description: 'SegmentedControl cannot be used without a value', slug: 'segmented-control-no-value', category: 'components', tags: ['segmented control', 'components'], created_at: 'March 15, 2024', last_updated_at: 'March 15, 2024', };

export default Layout(meta);

Can I use SegmentedControl with an initial empty value?

SegmentedControl cannot be used without a value. It is based on FloatingIndicator and requires a value to work properly. If neither value nor defaultValue is provided, SegmentedControl will automatically set the first item as active.

Can I deselect a value in SegmentedControl?

No, SegmentedControl is designed to always have a value. This constraint is required for the component animations and floating indicator to work properly.

What should I use instead if I need deselect functionality?

If you need to have a control that can be deselected, consider using Radio or Checkbox components. Both Radio and Checkbox can be deselected by setting the checked={false} prop.

I want a component that looks like SegmentedControl but can be deselected

You can build a custom component that works similar to SegmentedControl with FloatingIndicator.