# Separator An engraved rule: a fine groove cut into the plate, a hairline with a catch of light on its lower wall, or on its right wall when it stands upright. It divides without shouting, with no colour, no weight and nothing to read. Quiet keeps only the hairline. A real hr is a separator to a screen reader; one that only spaces things out says nothing. Kit part · Free · https://tactileui.dev/parts/separator - Element: `
` - Needs: `kit.css` only, no script ([how to install the kit](https://tactileui.dev/docs/installation#the-kit)) - Categories: Cards & panels - Finishes: Aluminium, Graphite, Oak, Walnut, Porcelain, Black, Daylight, Night, Paper, Phosphor, E-paper, AMOLED - Volumes: Tactile, Quiet ## Variants ### Horizontal · hr ```html
Above
Below
``` ### Upright · role="separator" ```html
EditViewHelp
``` ### Only spacing · role="none" ```html
Above
Below
``` ### Flush · --flush ```html
Above
Below
``` ### Inset · --inset ```html
Above
Below
``` ### Between keys in a toolbar ```html
``` ## Every state - Horizontal - Upright - Inset - On a dark plate Hover, pressed and focus are forced with `.is-hover`, `.is-down` and `.is-focus`; checked and disabled are real. ## API | Name | Kind | Values | What it does | | - | - | - | - | | hr.tui-separator | element | horizontal | The rule: 2px tall, a hairline and a catch of light under it, with air above and below. | | div.tui-separator[role="none"] | element | decorative | The same drawing where it only spaces things out, so a screen reader does not count it. | | --vertical | modifier | with role and aria-orientation | An upright rule that stretches to the height of its row. Say role="separator" and aria-orientation="vertical"; HTML has no element for it. | | --flush · --inset | modifier | tui-separator--flush, --inset | No air round it, for a place that sets its own; or held in from both edges. | | margin | CSS property | 16px 0 | Set it on the rule to change the space it makes. | ## Markup ```html
``` The demo on the page: ```html
Invoice 0412 · NorthwindDraft
Bill toHarlow & Finch Ltd14 Quay Street, Plymouth
Site survey, two days£840.00
Report and drawings£400.00
Total£1,240.00
``` ## Usage notes The invoice is split into its parts by horizontal rules, and the keys at the foot of it are split by upright ones. Switch the stage to Quiet to see the same rule drawn as a hairline. Try the other finishes: the groove follows each one. ## Accessibility - A real `
` is a separator to a screen reader, which is right where the rule marks a change of subject; where it only spaces things out, use a div with `role="none"` so it is not counted. - An upright rule needs `role="separator"` and `aria-orientation="vertical"`, since the default is horizontal and a div has no role of its own. - It carries no meaning that is not in the words around it: the rule is never the only sign of a boundary, so its low contrast is fine, and in a forced-colours mode it is drawn in the text colour. - It takes no focus and no pointer, and nothing in it moves, so reduced motion and a phone change nothing. ## How it’s built Two borders and nothing between them: the top one the kit’s hairline, the bottom one the catch of light that falls on the lower wall of a cut. Quiet turns the lower one off, which leaves the single hairline the rest of the Quiet volume uses. Upright, the lit wall is the one on the right, the side that faces the lamp. ## Rules Mark where one thing ends and the next begins, with a groove in the plate that is there when you look for it and quiet when you do not. The full rules are in `separator.rules.md` in the brain, which ships with the Kit. ## Related parts - [Divider with label](https://tactileui.dev/parts/divider-label): A rule with a word set into it. The same engraved groove as the separator runs out to both sides of a printed word, broken where the word sits: “or” between two ways in, a date between two days of messages, the name of the section below. The word is real text in reading order; only the two grooves are drawn. - [Panel](https://tactileui.dev/parts/panel): A face plate that groups what belongs together: a head, a rule, then the parts. Screws only on device-like panels. - [List](https://tactileui.dev/parts/list): Rows in a rack: a mark, a title, a second line and a fact or a key at the end. Chosen rows sink into a recess with their check key latched; in a running order, a row lifts out of the rack on its skirt and slides past the others, from the keyboard or by its grip.