Shadcn Field Slider & Switch

Filed with slider and switch. Built by composing Field, Slider, Switch. A free, open source shadcn field example you can install with npx shadcn@latest add @reui/c-field-5 and edit as your own code.

Filed with slider and switch

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

Best for: A switch at the end of a titled row, then a slider in steps of 5 whose live percent reads beside its label

When to use

Labeled inputs, selects, text areas and code entry with optional hint text under the control
Preference and permission lists where every switch or checkbox has a title and a description
Validation states with a red label and one error, or a list of them, under the control

When not to use

A range with 2 thumbs or tick marks under the track: use the Slider component
A complete page for entering or editing a record, such as an invoice or a profile: use the Form blocks
A full page of toggle rows for alert channels, app integrations or workspace options: use the Settings blocks
A numeric value stepped with plus and minus buttons or scrubbed by dragging: use the Number Field component

Agent notes

cpuLimit keeps the slider value in local state only, seeded at 75; save it from onValueChange
FieldTitle is a plain div, so a Checkbox or Switch titled only by it has no accessible name; point a FieldLabel at its id instead
data-invalid on Field only sets a red text color, which its label inherits; the control turns red from aria-invalid, which no example sets
Nothing ties FieldDescription or FieldError to the control; give them ids and list those in the control's aria-describedby

Markdownhttps://reui.io/components/field/c-field-5.md

MCPget_example("c-field-5")

Installnpx shadcn@latest add @reui/c-field-5

Full index for agents:llms.txtReUI MCP setup

Shadcn Components in Field Slider & Switch

About Shadcn Field Slider & Switch

Filed with slider and switch. Built by composing Field, Slider, Switch. A free, open source shadcn field example you can install with npx shadcn@latest add @reui/c-field-5 and edit as your own code.

What You Can Build With Shadcn Field Slider & Switch

Composes Field, Slider, Switch, so it drops into any project already using those components.
Install it with the shadcn CLI: npx shadcn@latest add @reui/c-field-5
Open source and free, with the full source on this page to copy or adapt.

More Shadcn Field Examples

Input Groups Fields with input groups
Input & Textarea Field with input and textarea
Select Controls Field with select control
Radio & Checkboxes Field with radio groups and checkboxes
OTP Input Field with OTP input
Settings Form Settings form with validation
Permissions Permission settings with checkboxes
Responsive Layout Responsive field layout
Notification Preferences Notification preferences form
Validation Errors Form with validation errors

Related Shadcn Component Categories

File Type
Open-source shadcn file type icon components for file extensions, export formats, and file browsers.
File Upload
Open-source shadcn file upload components for drag-and-drop uploads, multi-file flows, and upload progress.
Filters
Open-source shadcn filters components for filter bars, faceted search, and dashboard filtering.
Frame
Open-source shadcn frame components for embedded previews, app shells, and device mockups.
Gantt
Open-source shadcn gantt components with split tree and timeline panes, drag scheduling, and progress rollups.
Hover Card
Open-source shadcn hover card components for profile previews, rich link previews, and contextual details.

Frequently Asked Questions

When should I use Shadcn Field Slider & Switch?

Use it for a switch at the end of a titled row, then a slider in steps of 5 whose live percent reads beside its label.

Shadcn Field as a whole fits:

Labeled inputs, selects, text areas and code entry with optional hint text under the control
Preference and permission lists where every switch or checkbox has a title and a description
Validation states with a red label and one error, or a list of them, under the control

For a range with 2 thumbs or tick marks under the track, use the Slider component. For a complete page for entering or editing a record, such as an invoice or a profile, use the Form blocks. For a full page of toggle rows for alert channels, app integrations or workspace options, use the Settings blocks. For a numeric value stepped with plus and minus buttons or scrubbed by dragging, use the Number Field component.

How do I install Shadcn Field Slider & Switch?

Run npx shadcn@latest add @reui/c-field-5. The CLI copies the source into your project, so you own the code and can edit it freely.

Is Shadcn Field Slider & Switch free to use?

Yes. Every ReUI component example is open source and free for personal and commercial projects.

Which components does Shadcn Field Slider & Switch use?

It composes Field, Slider, Switch. The shadcn CLI installs those alongside the example.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.